如何使用 JavaScript 在段落前后放置 span 元素？答案

【问题标题】：How do I place span elements before and after a paragraph with JavaScript?如何使用 JavaScript 在段落前后放置 span 元素？
【发布时间】：2023-02-01 15:03:05
【问题描述】：

我在 HTML 中有一些经常更改的文本，我试图在它之前和之后放置一个 span 标记，但是当我尝试创建一个 span 元素并将它添加到文本元素之前时，它反而显示“[object HTMLSpanElement]”

我应该怎么做才能让文本元素在文本的两边都有一个单独的 span 元素？

期望输出： 

function myFunction() {
  myText = document.getElementById("myText");
  var mySpan = document.createElement('span');
  mySpan.textContent = 'example';

  myText.textContent = mySpan;
}

<p id="myText"> Example </p>

<button onclick="myFunction()"> Click Here </button>

【问题讨论】：

它显示 [object HTMLSpanElement] 的原因是因为您正在将一个对象 (mySpan) 分配给一个文本字段，因此 JS 正在将该对象转换为其字符串表示形式。
抱歉，我更新了问题以使其更清楚。

标签： javascript html

【解决方案1】：

因此，如果您想在另一个 DOM 元素之前和之后注入一个 DOM 元素，您可以使用 before() 和 after() 方法。这是after() 和before() 的文档。

function myFunction() {
    myText = document.getElementById("myText");
    var mySpanLeft = document.createElement('span');
    var mySpanRight = document.createElement('span');
    myText.before(mySpanLeft)
    myText.after(mySpanRight)
  }

<p id = "myText"> Example </p>

<button onclick = "myFunction()"> Click Here </button>

【讨论】：

OOOH，我明白了，好的，稍等，我会进行最后的最终编辑。
@Tabogachi 我编辑了我的消息并删除了旧消息。希望这现在可以解决您的问题。
考虑在这里只使用一个新的 span const newSpan = document.createElement('span'); myText.before(newSpan); myText.after(newSpan)
没问题@Tabogachi。 @MarkSchultheiss 我不认为这会起作用，因为before() 和after() 会移动相同的跨度实例。如果我错了，请纠正我。
@SnoopFrog 啊是的；周五晚些时候我的一个快速想法:(我想替代品只是附上它myText.before(document.createElement('span'))

【解决方案2】：

这是一个相当可读的分步方法。我还会重构以使用事件侦听器而不是内联 JavaScript，并传入一个元素以使函数可重用（始终是一个有价值的目标）。

function flankTextWithSpans(el) {
  const mySpan = document.createElement('span');
  const myText = el.textContent;

  el.replaceChildren();   // clear the element contents
  el.appendChild(mySpan); // append the empty span
  el.innerHTML += myText; // append the text
  el.appendChild(mySpan); // append the empty span again
}

document.querySelector('#myButton').addEventListener('click', () => {
  flankTextWithSpans(document.querySelector('#myText'));
});

span {
  background: pink;
  display: inline-block;
  width: 10px;
  height: 10px;
}

<p id="myText"> Example </p>

<button id="myButton"> Click Here </button>

【讨论】：

感觉这样比当前接受的问题更好地回答了“将其添加到文本元素中”的问题。
是的，这个问题改变了很多次仍然有内部矛盾（“将其添加到文本元素内”与显示跨度的所需标记示例外部).
“所需标记”还删除了  结束标记 - 这是有效的 HTML，但仍然增加了我同意的缺乏清晰度；

【解决方案3】：

这不是一个“完美”的示例，但您可以替换所有内容或只包含一个（或多个）单词，如果元素在某些情况下已经包含 HTML，这将面临挑战。

最初我对这个问题有点困惑，所以我添加了一个包装器和一个侧翼示例；

function wrapper(word, element) {
  const rgxp = new RegExp(word, 'g');
  const repl = '<span class="my-class">' + word + '</span>';
  element.innerHTML = element.innerHTML.replace(rgxp, repl);
}

function flanker(word, element) {
  const rgxp = new RegExp(word, 'g');
  const repl = '<span class="my-class"></span>' + word + '<span class="my-class"></span>';
  element.innerHTML = element.innerHTML.replace(rgxp, repl);
}

function callWrapper() {
  const myText = document.getElementById("myText");
  wrapper("Example", myText);
  flanker("guys", myText);
}

.my-class {
  background-color: yellow;
  border: solid green 2px;
  padding: 0.5rem;
}

<p id="myText"> Example fun guys </p>

<button onclick="callWrapper()"> Click Here </button>

【讨论】：