除了 .innerHTML 之外，还有哪些其他选项可以将 Javascript 生成的 HTML

Question

通常的做法是使用 .innerHTML 将动态生成的 HTML 放置在容器元素中。对于适合页面流的静态定位元素来说，这在逻辑上是有意义的。如果您正在生成使用 FIXED 定位的 HTML 元素怎么办？是否需要创建占位符元素并使用 placeholder.innerHTML 将生成的元素插入到 DOM 中？使用占位符似乎有点违反直觉，因为新的 HTML 实际上不会显示在呈现的文档流中的那个位置。此外，如果您生成大量固定元素，是否会对性能产生影响？有没有更快的方法告诉浏览器“这是我想要在其他所有元素之上的固定位置呈现的元素。” ？

Answer 1

幸运的是，Discord 上有人提供了答案。看来我问错了问题。我需要使用 innerHTML，但我可以在正文上将其作为附加而不是覆盖占位符容器中的 innerHTML。

document.body.innerHTML += someHtml;

这会将 html 附加到文档的末尾，从而消除了对容器的需要并暗示了意图。

没有提及不修改 DOM 的性能或替代方案，但我怀疑这种方法已经很好了。

Answer 2

你可以使用insertAdjacentHTML()方法。

document.querySelector('div').insertAdjacentHTML('beforebegin', 'beforebegin')

document.querySelector('div').insertAdjacentHTML('afterbegin', 'afterbegin')

document.querySelector('div').insertAdjacentHTML('beforeend', 'beforeend')

document.querySelector('div').insertAdjacentHTML('afterend', 'afterend')

<div style='border: solid 1px red'>

  <br>

  Some text

  <br>

</div>

或者，您也可以appendChild()像这样使用文本节点：

var txt = document.createTextNode('Some more text')

document.querySelector('div').appendChild(txt)

<div>

  Some text

  <br>

</div>