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

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

我有一个HTML字符串,我想在该元素之前附加(有点像innerHTML所做的那样,区别在于,我显然是把它放在之前,而不是在里面),例如：

"hello, world

Bar"

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

hello, world

Bar

有什么方法可以用JavaScript(没有任何库)来做到这一点吗？谢谢！

解决方法:

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

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内容,您可能需要一个不同的辅助元素.例如,如果字符串定义了表行或单元格.

Inserting Before

Before foo

After foo

setTimeout(function() {

var yourHTMLString = "hello, world

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);

标签：html,javascript,dynamic,nodes,innerhtml

来源： https://codeday.me/bug/20190722/1507213.html