javascript插入元素问题

Question

<div id="a">
<p>safasdddfffff</p>
</div>

<div id="b">
</div>

使用原生javascript把a里面的innerHtml内容分别插入到ab之间，b之后。其中包括重新创建一个div节点c和不创建div节点c直接把p的内容插入

Answer 1

// 包div
// a
var a = document.getElementById('a');
var html = a.innerHTML;

// b
var b = document.getElementById('b');

// 父节点
var p = a.parentNode;

// d1
var d1 = document.createElement('div');
d1.innerHTML = html;

// d2
var d2 = document.createElement('div');
d2.innerHTML = html;


// 插入到a，b之间
p.insertBefore(d1, b);

// 插入到b之后
var nextEl = b.nextSibling;
if (nextEl) {
    p.insertBefore(d2, nextEl);
} else {
    p.appendChild(d2);
}

// 不包div
// a
var a = document.getElementById('a');
var html = a.innerHTML;

// b
var b = document.getElementById('b');

// 父节点
var p = a.parentNode;

// d
var d = document.createElement('div');
d.innerHTML = html;
// 获取子节点
var children = d.childNodes;
var length = children.length;
// 把所有子节点插入到a，b之间
for (var i = 0; i < length; i++) {
    p.insertBefore(children[0], b);
}

d.innerHTML = html;
// 获取子节点
children = d.childNodes;
length = children.length;
var nextEl = b.nextSibling;
// 把所有子节点插入到b之后
for (var i = 0; i < length; i++) {
    if (nextEl) {
        p.insertBefore(children[0], nextEl);
    } else {
        p.appendChild(children[0]);
    }
}

Answer 2

描述清楚一点，1234的列出来。追问

1、用div装着a里面的p内容，然后插入在ab两个div之间以及b之后
2、直接把p内容插入在ab两个div之间以及b之后
别问我ab是什么，就是id命

追答

function test(){
var oldHtml = document.getElementById("a").innerHTML;
var newHtml = ""+oldHtml+"";
insertHTML(document.getElementById("b"), 'before', newHtml);
insertHTML(document.getElementById("b"), 'after', newHtml);
insertHTML(document.getElementById("b"), 'before', oldHtml);
insertHTML(document.getElementById("b"), 'after', oldHtml);
}

function insertHTML(el, where, html) {
if (!el) {
return false;
}

where = where.toLowerCase();

if (el.insertAdjacentHTML) {//IE
el.insertAdjacentHTML(where, html);
} else {
var range = el.ownerDocument.createRange(),
frag = null;

switch (where) {
case "before":
range.setStartBefore(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el);
return el.previousSibling;
case "after":
range.setStartAfter(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el.nextSibling);
return el.nextSibling;
}
}
}