在JavaScript中的元素之前添加innerHTML？ [复制]
Posted
技术标签:
【中文标题】在JavaScript中的元素之前添加innerHTML？ [复制]【英文标题】：Add innerHTML before an element in JavaScript? [duplicate] 【发布时间】：2014-04-21 17:44:38 【问题描述】：现在我不是在谈论创建子节点或子节点，我的字面意思是 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 中做到这一点（没有任何库）？谢谢！
【问题讨论】：
您可以在没有任何库的情况下执行此操作，但这会非常棘手，包括最后的文本节点。为什么你不使用 jQuery（并将整个东西包装在一个元素中）？ @MinkoGechev：如果他要将整个东西包装在一个元素中，那将变得非常容易，根本不需要 jQuery。无论如何，这并不难。 获取父节点的innerHTML，将其连接到这个新的HTML，然后将其存储为innerHTML。
@T.J.Crowder 是的，同意。
@Barmar: ...这会清除您在现有元素上可能拥有的任何事件处理程序。
【参考方案1】：
最优雅和最短的解决方案是在foo 上调用insertAdjacentHTML，并使用“beforeBegin”和html 字符串作为参数。纯 JS。
document.getElementById("foo").insertAdjacentHTML("beforeBegin",
"<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");
DEMO
【讨论】：
比我的答案好多了。【参考方案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>
【讨论】：
有什么办法可以去掉那个辅助元素，但保留内容？ @Ood：上面的内容就是这样做的。 哦，好的，我明白了。谢谢你，很好的答案！以上是关于在JavaScript中的元素之前添加innerHTML？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章