javascript - 如何在两个DOM节点之间插入HTML字符串？

考虑以下DOM片段:

<div id="div-1">foo</div>
<div id="div-2">bar</div>

是否可以在div之间插入HTML字符串(EDIT:包含要渲染的标签)，而无需将其包装在通过document.createElement创建的另一个div(EDIT:或其他标签)中并设置其innerHTML属性？

最佳答案

大多数浏览器都支持 element#insertAdjacentHTML() ，它最终成为标准的in the HTML5 specification。不幸的是，Firefox 7和更低版本不支持它，但是我设法找到a workaround that uses ranges来插入HTML。我在下面对其进行了调整，以适合您的情况:

var el = document.getElementById("div-2"),
    html = "<span>Some HTML <b>here</b></span>";

// Internet Explorer, Opera, Chrome, Firefox 8+ and Safari
if (el.insertAdjacentHTML)
    el.insertAdjacentHTML ("beforebegin", html);
else {
    var range = document.createRange();
    var frag = range.createContextualFragment(html);
    el.parentNode.insertBefore(frag, el);
}

实时示例:http://jsfiddle.net/AndyE/jARTf/

关于javascript - 如何在两个DOM节点之间插入HTML字符串？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4023194/