Wrapping ein Element innerhalb des innerHTML- eines anderen

Question

habe ich

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

und ich bin zu wollen

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

Wie kann ich in den Inhalt der .blue eine Spannweite wickeln machen?

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

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

Closest ich gekommen bin ist blue.appendChild(orange); aber das legt sich Orange am unteren Rand des blau.

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

insert Versuchen anstelle von appendChild verwenden, an der ersten Position im Inneren blau einzufügen.

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

Ähnlich hinzufügen Sie es überall wo Sie benötigen.