如何用JavaScript/JQuery修改span内容？尝试input方法无效求方案

你之前修改的是隐藏输入框的value，但这个输入框是type='hidden'，本身不会在页面上显示内容，所以页面上看不到变化。要让<span class="tag" id="tag-option">显示test_succeed，需要直接操作这个span元素：

方法一：保留原有子元素并添加文本 #

直接在隐藏输入框后插入要显示的文本，同时可以同步更新隐藏输入框的值（如果需要表单提交时传递该值）：

<span class="tag" id="tag-option">
  <input type='hidden' name='tag-value' value='' id="test-input">
  <span class="close"></span>
</span>
<script>
  // 更新隐藏输入框的值
  document.getElementById('test-input').value = "test_succeed";
  // 获取目标span和输入框元素
  const tagSpan = document.getElementById('tag-option');
  const inputEl = document.getElementById('test-input');
  // 创建文本节点并插入到输入框之后
  const textNode = document.createTextNode("test_succeed");
  tagSpan.insertBefore(textNode, inputEl.nextSibling);
</script>

方法二：直接替换innerHTML #

如果需要一次性设置完整内容，可直接修改span的innerHTML：

<span class="tag" id="tag-option">
  <input type='hidden' name='tag-value' value='' id="test-input">
  <span class="close"></span>
</span>
<script>
  const targetSpan = document.getElementById('tag-option');
  // 同时设置显示文本和隐藏输入框的值
  targetSpan.innerHTML = `
    <input type='hidden' name='tag-value' value='test_succeed' id="test-input">
    test_succeed
    <span class="close"></span>
  `;
</script>

核心逻辑：隐藏输入框仅用于表单数据传递，不会在页面渲染内容，要显示文本必须直接操作负责展示的#tag-option span元素。

内容的提问来源于stack exchange，提问作者Akram BENGHANEM