Equivalent to javascript wrap

Question

The jquery has a method called wrap that basically adds a container to the desired element, but I can’t find the javascript method, anyone knows?

Answer 1

Well, I think maybe this will help you.

org_html = document.getElementById("containerPAI").innerHTML;
new_html = "<div id='containerFILHO'>" + org_html + "</div>";
document.getElementById("containerPAI").innerHTML = new_html;

Good Luck!

UPDATE

Reference links for study:

• https://stackoverflow.com/questions/3176839/how-can-i-wrap-all-elements-in-one-container-rather-than-each-element
• https://stackoverflow.com/questions/6838104/pure-javascript-method-to-wrap-content-in-a-div
• https://stackoverflow.com/questions/31472754/wrap-a-around-div-without-jquery
• https://stackoverflow.com/questions/25488322/wrap-an-element-like-wrap-function-in-jquery-with-pure-js

Answer 2

Something like that would work:

function wrapHTML (element, wrapperElement) {

  //Aqui você define seu wrapper
  let wrapper = wrapperElement || document.createElement('div');
  //Colocando um id só para evidenciar o wrapper.
  wrapper.id = 'divFilha';
  
  element.parentNode.appendChild(wrapper);
  wrapper.appendChild(element);
  
  return wrapper;
}

wrapHTML(document.getElementById('conteudoWrap'));
console.log(document.getElementById('divPai'));

<div id="divPai">
  <input id="conteudoWrap" type="text" />
</div>

Answer 3

Unfortunately I did not find anywhere an equivalent function, where you pass an element and an html string as container, so I made my own, is working perfectly, I will leave here for future references.

function lastNode(el) {
  if(el.children.length) return lastNode(el.children[el.children.length-1]);
  else return el;
}

function wrap(string, el) {
  creat = document.createElement('div');
  creat.innerHTML = string;
  parent = el.parentNode;
  lastNode(creat).appendChild(el);
  parent.appendChild(creat.firstChild);
}

let string = '<div id="e3"><div id="e4"></div></div>';
let el = document.querySelector('#e5');
wrap(string , el);

#e1 {
  border: 5px black solid;
}
#e2 {
  border: 5px orange solid;
}
#e3 {
  border: 5px purple solid;
}
#e4 {
  border: 5px green solid;
}
#e5 {
  border: 5px red solid;
}

<div id="e1">
  <div id="e2">
    <div id="e5"></div>
  </div>
</div>