Question

I have this

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

and want to get it to this

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

with arbitary text inside out, how can I detect position of 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);
});

Live Example