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

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:  

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>

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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 >'   word   '</span>';
  element.innerHTML = element.innerHTML.replace(rgxp, repl);
}

function flanker(word, element) {
  const rgxp = new RegExp(word, 'g');
  const repl = '<span ></span>'   word   '<span ></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>