Question

我有HTML字符串，可以是：

任何HTML5标记，例如

<header>
    Stuff inside element
</header>

或

Text before the footer
<footer>
    Stuff inside element
</footer>

或只是

This is the content of the string

我想在这样的情况下在现有元素之后追加其中一个：

<div>
    Existing element
</div>
[ i should put loaded HTML string right here ]

我在编写纯JavaScript方面不是很熟练，而且我不知道如何在不创建容器元素的情况下附加字符串，如下所示：

var newElement = document.createElement("div");
newElement.innerHTML = "<header>Stuff inside element</header>";
existingElement.parentNode.insertBefore(newElement, existingElement.nextSibling);

我的问题是这段代码生成了HTML的这一部分：

<div>
    Existing element
</div>
<div> <-- unwanted container
    <header>
        Stuff inside element
    </header>
</div> <-- unwanted container

如果我没有将相同的内容放在其中，我怎么能避免创建容器元素以将HTML字符串放在文档中？

Answer 1

这非常简单：

var newElement = document.createElement("header");
newElement.innerHTML = "Stuff inside element";
existingElement.parentNode.insertBefore(newElement, existingElement.nextSibling);

Answer 2

我可能错了，但不会做以下工作：

var newElement = document.createElement("header");
newElement.innerHTML = "Stuff inside element";
existingElement.parentNode.insertBefore(newElement, existingElement.nextSibling);

Answer 3

我找到了解决方案：

existingElement.insertAdjacentHTML("beforeBegin", htmlString);

这将让我避免在元素容器中创建。

在没有容器的情况下追加另一个元素

3 个答案: