javascript - 除了 .innerHTML 之外，还有哪些其他选项可以将 Javascript 生成的 HTML 插入 DOM？

Question

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

Answer 1

您可以使用 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>