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

Question

考虑以下 DOM 片段：

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

是否可以在div之间插入HTML字符串（编辑：包含要渲染的标签）而不将其包装在通过document.createElement创建的另一个div（编辑：或其他一些标签）中并设置其innerHTML属性？

Answer 1

大多数浏览器都支持

element#insertAdjacentHTML()

，最终成为HTML5规范中的标准。 不幸的是，Firefox 7 及更低版本不支持它，但我设法找到了一个使用范围来插入 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/

浏览器支持：https://caniuse.com/insertadjacenthtml

Answer 2

这适用于直接文本，这就是我阅读您原始问题的方式（请参阅下文以了解包含标签的字符串的更新）：

var div = document.getElementById('div-2');
var textNode = document.createTextNode('your text');
div.parentNode.insertBefore(textNode, div);

实例

如果您从以下内容开始：

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

（请注意，它们之间没有空格）那么上面的结果正是您使用此 HTML 得到的结果：

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

如果 div 之间确实有空白，那么那里已经有一个文本节点，上面的代码将在其旁边插入另一个文本节点。对于几乎所有意图和目的，这并不重要，但如果这让您烦恼，您可以根据需要附加到现有文本节点：

var text = 'your text';
var div = document.getElementById('div-2');
var prev = div.previousSibling;
if (prev && prev.nodeType == 3) { // 3 == TEXT_NODE
  // Prev is a text node, append to it
  prev.nodeValue = prev.nodeValue + text;
}
else {
  // Prev isn't a text node, insert one
  var textNode = document.createTextNode(text);
  div.parentNode.insertBefore(textNode, div);
}

实例

W3C 文档链接：

insertBefore

、

createTextNode

包括 HTML 标签

在修改后的问题中，您说过您希望包含在执行所有这些操作时要解释的标签。这是可能的，但这是迂回的。首先，将 HTML 字符串放入一个元素中，然后将内容移过去，如下所示：

var text, div, tempdiv, node, next, parent;

// The text
text = 'your text <em>with</em> <strong>tags</strong> in it';

// Get the element to insert in front of, and its parent
div = document.getElementById('div-2');
parent = div.parentNode;

// Create a temporary container and render the HTML to it
tempdiv = document.createElement('div');
tempdiv.innerHTML = text;

// Walk through the children of the container, moving them
// to the desired target. Note that we have to be sure to
// grab the node's next sibling *before* we move it, because
// these things are live and when we moev it, well, the next
// sibling will become div-2!
node = tempdiv.firstChild;
next = node.nextSibling;
while (node) {
  parent.insertBefore(node, div);
  node = next;
  next = node ? node.nextSibling : undefined;
}

实例

但是这里有龙，您必须选择适合您要插入的内容的容器元素。例如，我们不能在上面的代码中使用

<tr>

，因为我们将其插入到

div

，而不是

tbody

，因此这是无效的，并且结果是特定于实现的。这些复杂性就是我们需要图书馆来帮助我们解决的原因。您要求提供原始 DOM 答案，这就是上面的内容，但我真的会查看 jQuery、Closure、Prototype、YUI 或 其他任何一个。他们会为你解决很多问题。

Answer 3

var neuB = document.createElement("b");
var neuBText = document.createTextNode("mit fettem Text ");
neuB.appendChild(neuBText);
document.getElementById("derText").insertBefore(neuB, document.getElementById("derKursiveText"));

您搜索：insertBefore

Answer 4

使用 jquery 非常简单：

$("#div-1").after("Other tag here!!!");

参见：jquery.after

很明显，javascript 不是一个纯粹的 javascript 解决方案。