I have the following code:
<div id="a"><p>this is p</p></div>
I want to wrap content inside like
<div id="a"><div class="wrap"><p>this is p</p></div></div>
You can do:
const p = document.querySelector('p');
p.outerHTML = `<div class="wrap">${p.outerHTML}</div>`;.wrap{border:2px solid blue}
#a{border:2px solid red}<div id="a">
<p>this is p</p>
</div>let curDiv = document.getElementById("a");
curDiv.innerHTML = `<div id="wrap">${curDiv.innerHTML}</div>`#a{
border:1px solid green;
padding: 6px;
}
#wrap{
border:1px solid red;
padding: 6px;
}<html>
<body>
<div id="a">
<p>this is p</p>
</div>
</body>
</html>Use this:
var wrapDiv = document.createElement('div');
wrapDiv.setAttribute('class', 'wrap');
var children = document.getElementById('a').getElementsByTagName('p')[0];
children.parentNode.insertBefore(wrapDiv, children);
wrapDiv.appendChild(children);