如何在 JavaScript 的段落前后放置 span 元素？

Question

我在 HTML 中有一些经常更改的文本，我试图将其包装在跨度 class 中，但是当我尝试创建一个跨度元素并将其添加到文本元素中时，它反而显示“[object HTMLSpanElement]”

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

所需的 output： <span></span> <p id = "mytext"> <span></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>

Answer 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>

Answer 2

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

 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>

Answer 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>