How do I place span elements before and after a paragraph with JavaScript?

Question

I have some text in HTML that changes frequently and I'm trying to wrap it in a span class, but when I try to create a span element and add it inside the text element it instead displays "[object HTMLSpanElement]"

What should I do so I can have a text element that has a seperate span element on both sides of the text?

Desired 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

So if you want to inject a DOM element before another and after, you could use before() and after() methods. Here's documentation for after() and forbefore() .

 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

Here's a step-by-step approach that's fairly readable. I would also refactor to use an event listener instead of inline JavaScript, and to pass in an element to make the function reusable (always a worthy goal).

 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

This is not a "perfect" example but you can either replace all or just wrap a word (or words) this will have challenges if the element contains HTML already in some situations.

I was a bit confused initially by the question so I added a wrapper and a flanker example;

 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>