除了.innerHTML之外,还有其他将Javascript生成的HTML插入DOM的选项吗?

问题描述

常见做法是使用.innerHTML将动态生成的HTML放置在容器元素中。对于适合页面流的静态定位元素,这是合乎逻辑的。

如果要生成用FIXED定位的HTML元素怎么办?是否需要创建一个占位符元素并使用placeholder.innerHTML将生成的元素插入DOM?使用占位符似乎有点违反直觉,因为新的HTML实际上不会显示在呈现的文档流中的该位置。

此外,如果生成大量固定元素,是否会对性能产生影响?有没有一种更快的方法告诉浏览器“这是我要在其他所有元素的固定位置呈现的元素”。 ?

解决方法

幸运的是,Discord上的某人提供了答案。 看来我在问错问题。我需要使用innerHTML,但是我可以将它作为附加内容在主体上进行操作,而不必在占位符容器中覆盖innerHTML。

document.body.innerHTML += someHtml;

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

没有提及性能或不修改DOM的替代方法,但我怀疑这种方法是可行的。

,

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

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...