I need some help using JavaScript to wrap <span> tags around existing content-CodePudding

Hey appreciate any help I can get with this as I'm still learning JavaScript.

I have some HTML that I'm trying to insert specific span tags into. I've found answers that allow you to just replace inner HTML, however the content I'm trying to wrap around is slightly different on each page I'm trying to achieve this for - but the HTML structure is the same.

Here is the current HTML, vs what I would like it to be:

<div >
<p>
Showing 1 - 18 of 46 results
</p>
</div>

And what I'd like to add in:

<div  content="nosnippet">
<p>
<span data-nosnippet>Showing 1 - 18 of 46 results</span>
</p>
</div>

I have tried various codes and successfully added the content="nosnippet" section,

document.querySelector(".list-view__count ").setAttribute("content", "nosnippet")

but the tag I can't seem to figure out how it is done yet.

Any help will be appreciated.

Cheers

CodePudding user response：

try something like

    var div = document.getElementById('list-view__count');
    var x = document.creatElement('span');
    var text = document.createTextNode('text here');
   x.appendChild(text)
    div.appendChild(x)

CodePudding user response：

You can get the text inside the <p> with textContent, save it in a variable, then create a span tag and set the text to the <span> with the same method.
I don't think you can set a data... attribute without a value like that, but functionally it should be the same.
Wrapped it in another div so it's easier to visualize the output.

const div = document.querySelector(".list-view__count");
const p = document.querySelector(".list-view__count>p");
const pText = p.textContent;
const span = document.createElement("span");

div.setAttribute("content", "nosnippet")
p.textContent = '';
span.textContent = pText;
span.setAttribute("data-nosnippet", '')
p.appendChild(span);

console.log(document.querySelector(".wrap").outerHTML)

<div >

    <div >
    <p>
    Showing 1 - 18 of 46 results
    </p>
    </div>

  </div>

CodePudding user response：

You can select the p element that is the immediate child of your div, pick up its innerHTML (I did this just in case it had some HTML mark up in it so that is preserved), clear the innerHTML of the p element then append a span element which has the data- attribute set and the innerHTML copied from the original p.

const p = document.querySelector('.list-view__count > p');
const pInner = p.innerHTML;
p.innerHTML = '';
const span = document.createElement('span');
span.innerHTML = pInner;
span.setAttribute('data-nosnippet', '');
p.append(span);

<div >
  <p>
    Showing 1 - 18 of 46 results
  </p>
</div>

CodePudding user response：

Explanations are in the code, for every line.

document.addEventListener('DOMContentLoaded', () => { // make sure DOM is parsed ...
  let items = document.querySelectorAll('.list-view__count p'); // ... to find elements
  for (const item of items) { // iterate over the node list
    let span = document.createElement('span'); // create the span
    span.toggleAttribute('data-nosnippet', true); // add the data-nosnippet attribute, with no value
    span.append(item.childNodes[0]); // move the text node into the span
    item.append(span); // and the span into the paragraph
  }
})

/* some css so we see the change works */
span[data-nosnippet] { color: green; }

<div >
  <p>
    Showing 1 - 18 of 46 results
  </p>
</div>
<div >
  <p>
    Showing 1 - 18 of 49 results
  </p>
</div>
<div >
  <p>
    Showing 1 - 18 of 41 results
  </p>
</div>