如何在 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>