在JavaScript中的元素之前添加innerHTML？ [复制]

Question

现在我不是在谈论创建子节点或子节点，我的字面意思是 HTML。这就是我想做的：

我有一个基本节点，例如：

<div id="foo"></div>

我有一个 HTML 字符串，我想在那个元素之前附加（有点像 innerHTML 所做的，不同的是，我显然是把它放在前面，而不是里面），例如：

"<span>hello, world</span><div></div>Foo<img src="logo.png" />Bar"

现在我想在 div 之前插入那个 HTML，所以我的结果是：

<span>hello, world</span><div></div>Foo<img src="logo.png" />Bar<div id="foo"></div>

有什么方法可以在 JavaScript 中做到这一点（没有任何库）？谢谢！

Answer 1

最优雅和最短的解决方案是在foo 上调用insertAdjacentHTML，并使用“beforeBegin”和html 字符串作为参数。纯 JS。

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DEMO

Answer 2

最简单的方法是使用辅助元素进行解析，然后获取其内容。像这样：

var foo = document.getElementById("foo");
var parent = foo.parentNode;
var helper = document.createElement('div');
helper.innerHTML = yourHTMLString;
while (helper.firstChild) {
    parent.insertBefore(helper.firstChild, foo);
}

在那里，我们创建一个临时助手，然后将字符串分配给它以生成内容，然后将那些子节点（元素和文本节点的混合）移动到 foo 的父节点，就在前面foo.

请注意，根据 HTML 内容，您可能需要不同的辅助元素。例如，如果字符串定义了表格行或单元格。

完整示例 - live copy

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Inserting Before</title>
</head>
<body>
  <div>Before foo</div>
  <div id="foo"></div>
  <div>After foo</div>
  <script>
    setTimeout(function() {
      var yourHTMLString = "<span>hello, world</span><div></div>Foo<img src=\"logo.png\" />Bar";
      var foo = document.getElementById("foo");
      var parent = foo.parentNode;
      var helper = document.createElement('div');
      helper.innerHTML = yourHTMLString;
      while (helper.firstChild) {
        parent.insertBefore(helper.firstChild, foo);
      }
    }, 500);
  </script>
</body>
</html>