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

最优雅，最简短的解决方案是使用“beforeBegin”和html字符串作为参数在foo上调用insertAdjacentHTML。纯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>

在JavaScript中的元素之前添加innerHTML？

2 个答案: