のdiv操作

Question

は、どのように私は、内側のdivの位置を検出し、私は必要なものを手に入れることができますか？

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

Answer 2

これは新しい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()