Question

我有

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

我想要制作

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

如何在.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

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试使用insertBefore而不是appendChild，插入蓝色内的第一个位置。

post_system

同样将其添加到您需要的任何地方。

将元素包装在另一个

2 个答案: