Manipulation div

Question

I have it

<div class="out"> out asdaasd <div class="in"> in </div> out </div> 

and want to get it on this

 <div class="out"> out asdaasd <div> <div class="in"> in </div> <div class="out"> out </div> 

with dry text inside out, how can I determine the position of the inner div and get what I need?

Answer 1

 var outers = document.getElementsByClassName("out"); [].forEach.call(outers, function(outer) { var inner = outer.getElementsByClassName("in")[0]; var children = outer.childNodes; var flag = true; var before = document.createElement("div"); var after = document.createElement("div"); before.classList.add("out"); after.classList.add("out"); [].slice.call(children).forEach(function(node) { if (node == inner) { return flag = false; } if (flag) { before.appendChild(node); } else { after.appendChild(node); } }); var frag = document.createDocumentFragment(); frag.appendChild(before); frag.appendChild(inner); frag.appendChild(after); outer.parentNode.replaceChild(frag, outer); }); 

Living example

Answer 2

This will create the desired structure in the new div.

 <div class="out"> out asdaasd <div class="in"> in </div> out </div> <div id="xyz"> </div> $('.out').contents().each(function() { if(this.nodeType == 3) { $('#xyz').append("<div class='out'>"+$(this).text()+"</div>"); } else { $('#xyz').append(this); } }); 

Answer 3

 var a = $('<div class="out"> out asdaasd<div class="in"> in </div>out</div>'), tmp = $("<div/>"); a.contents().each(function() { if(this.nodeType == 1) tmp.append(this); else tmp.append($(this).wrap("<div class='out' />").parent()); }); tmp.html()