在另一個的innerHTML內部包裝一個元素

Question

我有

<div class="blue"><a href="#">link</a></div>

我想做

<div class="blue"><span class="orange"><a href="#">link</a></span></div>

如何在.blue的內容中包含.blue ？

var blue = document.querySelector('.blue');

var orange = document.createElement('span');
orange.classList.add('orange');

我最近來的是blue.appendChild(orange); 但這會將橙色置於藍色的底部。

http://jsbin.com/zuxibakihi/edit?html,css,js,output

Answer 1

 var blue = document.querySelector('.blue'); var orange = document.createElement('span'); orange.classList.add('orange'); while (blue.childNodes.length > 0) { orange.appendChild(blue.childNodes[0]); } blue.appendChild(orange); 

 div {background:blue} a {background:red} span {background:orange} div,a,span {display:block;padding:10px;} 

 <div class="blue"> <a href="#">link</a><!-- extra spaces ^^^ or comments count as nodes, that is why "while" is a safe option even when in a simple html you think that you have a single node. --></div> <br><br><br><br> What I'm trying to do: <div><span><a href="#">link</a></span></div> 

Answer 2

嘗試使用insertBefore而不是appendChild來插入藍色中的第一個位置。

var blue = document.querySelector('.blue');
blue.insertBefore(orange, blue.firstChild);

同樣，將其添加到您需要的任何位置。