为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

胡子哥哥 2023-01-06 15:24:01

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

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

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


查看完整描述

2 回答

?
海绵宝宝撒

TA贡献1532条经验 获得超8个赞

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

document.body.innerHTML += someHtml;

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

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


查看完整回答
反对 回复 2023-01-06
?
回首忆惘然

TA贡献1622条经验 获得超10个赞

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


查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 13 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信