的Javascript包裝元素，並在同一位置

Question

插入我有以下代碼

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>

現在我想在同一位置它所包裝的元素插入this.newWrap。因此，爲了與相同的選擇說，我用它來包裹元素在這種情況下document.querySelector('.two')，而不是像document.querySelector('.three')在.insertBefore()

我怎麼能這樣做見過？

Answer 1

現在我想用我用包裹元素相同的選擇插入this.newWrap ...

如果你的意思是相同父，並在同一個地方在父母的子列表，你確實使用insertBefore   —移動元素之前你包裝：

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>

如果你喜歡先移動元素，不過，這也是一個選項  —你只是跟蹤其前母公司及以下的兄弟姐妹：

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>

這一工程甚至在其父項的最後一個元素上，因爲在這種情況下，nextSibling將是null，並且如果您將null作爲「before」元素傳遞到insertBefore， ds到最後。 :-)