Javascriptが要素をラップし、同じ位置に

Question

を挿入し、私は今、私はそれがラップ要素がある同じ位置にthis.newWrapを挿入したいと思います次のコード

this.newWrap = document.createElement("div"); 
 
this.newWrap.classList.add('xxx'); 
 

 
this.newWrap.appendChild(
 
    document.querySelector('.two') 
 
); 
 

 
document.querySelector('.wrap').insertBefore(
 
    this.newWrap, 
 
    document.querySelector('.three') 
 
);

.xxx { 
 
    background-color: orange; 
 
}

<div class="wrap"> 
 
    <div class="one">One</div> 
 
    <div class="two">two</div> 
 
    <div class="three">three</div> 
 
    <div class="four">four</div> 
 
    <div class="five">five</div> 
 
</div>

を持っています。つまり、同じセレクタを使って、この場合の要素をラップするのに、.insertBefore()と表示されているようなdocument.querySelector('.two')があります。

どうすればいいですか？

Answer 1

今、私はあなたが同じ親を意味する場合

...私は要素をラップするために使用するのと同じセレクタでthis.newWrapを挿入することが好きで、その親の中に同じ場所にあるでしょう

this.newWrap = document.createElement("div"); 
 
this.newWrap.classList.add('xxx'); 
 
var toWrap = document.querySelector('.two'); 
 
toWrap.parentNode.insertBefore(this.newWrap, toWrap); 
 
this.newWrap.appendChild(toWrap);

.xxx { 
 
    background-color: orange; 
 
}

<div class="wrap"> 
 
    <div class="one">One</div> 
 
    <div class="two">two</div> 
 
    <div class="three">three</div> 
 
    <div class="four">four</div> 
 
    <div class="five">five</div> 
 
</div>

：子リストは、あなたは確かにあなたがラップしている要素を移動する前 insertBefore   —を使うのですか

あなたが最初の要素を移動する場合は、しかし、それはまた、あなたがちょうどその前の親を追跡し、兄弟を次のオプション  —です：

this.newWrap = document.createElement("div"); 
 
this.newWrap.classList.add('xxx'); 
 
var toWrap = document.querySelector('.two'); 
 
var parent = toWrap.parentNode; 
 
var next = toWrap.nextSibling; 
 
this.newWrap.appendChild(toWrap); 
 
parent.insertBefore(this.newWrap, next);

.xxx { 
 
    background-color: orange; 
 
}

<div class="wrap"> 
 
    <div class="one">One</div> 
 
    <div class="two">two</div> 
 
    <div class="three">three</div> 
 
    <div class="four">four</div> 
 
    <div class="five">five</div> 
 
</div>

作品その場合は親の最後の要素であっても、その場合はがnullになり、nullを「before」要素としてinsertBeforeに渡すと、最後までds。 :-)