在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

最优雅的和最短的解决方法是调用insertAdjacentHTML上foo与"beforeBegin"和HTML字符串作为参数.纯JS.

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

DEMO