How can I wrap children elements inside a div with pure javascript?

Question

For instance, I have the following code

<div class="parent>
  <p> Item 1 </p>
  <p> Item 1 </p>
  <p> Item 1 </p>
</div>

I want turn the code above into the following code with pure javascript

<div class="parent>
  <div class="parent-child>
    <p> Item 1 </p>
    <p> Item 1 </p>
    <p> Item 1 </p>
  </div>
</div>

Does this answer your question? [Pure javascript method to wrap content in a div](https://stackoverflow.com/questions/6838104/pure-javascript-method-to-wrap-content-in-a-div) — KDani-99, Feb 27 '20 at 15:08

score 0 · Answer 1 · answered Feb 27 '20 at 15:16

You better use id rather than class as identifiers. However, here is the working code for you.

var parents = document.getElementsByClassName("parent");
var children = parents[0].innerHTML;
var newContent = '<div class="parent-child">' + children + '</div>';
parents[0].innerHTML = newContent;

<div class="parent">
  <p> Item 1 </p>
  <p> Item 1 </p>
  <p> Item 1 </p>
</div>

UPDATE: I see someone gave a link to a similar answer. Feel free to use either

How can I wrap children elements inside a div with pure javascript?

1 Answers1