Javascript 将一个元素包装到另一个元素的innerHTML中

我有

最接近我的是

blue.appendChild（橙色）但这会将橙色放在蓝色的底部


var blue=document.querySelector（'.blue'）；
var orange=document.createElement（'span'）；
orange.classList.add（'orange'）；
while（blue.childNodes.length>0）{
橙色.appendChild（蓝色.childNodes[0]）；
}
蓝色。红色（橙色）
div{背景：蓝色}
a{背景：红色}
span{背景：橙色}
div，a，span{显示：块；填充：10px；}






我想做的是：
尝试使用insertBefore而不是appendChild，在蓝色中的第一个位置插入

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

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

类似地，将其添加到您需要的任何位置

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

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

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

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