将现有元素插入刚创建的元素

Question

如果我有<span>Some Code Here</span>，我是否可以创建新的div元素并将span元素移到刚创建的div内？

新元素必须位于span元素之前的位置

我想使用纯JavaScript代码

Answer 1

HTML：

<span id="the_id">Some code...</span>    

JS：

var the_div = document.getElementById('the_id');
var foobar = document.createElement('div');
foobar.appendChild(the_id);
the_id.parentNode.replaceChild(foobar, the_id);

Answer 2

var wrapper = document.createElement('div');
var selected_span = document.getElementByTagName('span')[0]; //get the first available span element
span_clone = selected_span.cloneNode(true);
selected_span.parentNode.insertBefore(wrapper, selected_span);
selected_span.parentNode.removeChild(selected_span);
wrapper.appendChild(span_clone);

这样做会创建一个新的<div>，创建span的副本，删除原始span，然后将副本插入div

jsFiddle

this是容器中的相同示例

Answer 3

你去：

http://jsbin.com/uyiluf/3

源：

http://jsbin.com/uyiluf/3/edit#source