javascript - 如何将客户端渲染的 HTML 插入 DOM-6ren

javascript - 如何将客户端渲染的 HTML 插入 DOM

转载作者：行者123 更新时间：2023-12-03 04:28:29

24

4

我刚刚使用像 pug 这样的库在浏览器中渲染了一些 HTML , mustache , handlebars ，或dust 。例如，"<div><p>I'm text!</p></div>" .

如果我使用像 React 或 Ember 这样的框架，渲染的模板将自动插入到 DOM 中(由于虚拟 DOM 比较，以侵入性最小的方式)。但这些库只是给我一个 HTML 字符串。我该如何使用它？

是否像找到所需的父 DOM 节点并设置 innerHTML 一样简单？是否有我可以使用的未绑定(bind)到 React 的 DOM diffing 库？

[编辑]如果我重新渲染文本，结果是一样的，插入到 DOM 中理想情况下应该是幂等的，甚至不会干扰事件处理程序。

最佳答案

...I have the string of several nested elements already, and want to add it to the DOM.

您可以使用.innerHTML属性，但它有problems 。更好的替代方法是类似于 .innerHTML 的方法，称为 .insertAdjacentHTML() 。它没有problems innerHTML 具有这种功能，速度更快，并且您可以选择将字符串放置在元素之前/之后/前置/附加元素中。

Signature

element.insertAdjacentHTML(position, text);

position determines where the text goes relative to the element. It must be one of the following values:

*beforebegin*// <== insert before the element
  <element>
      *afterbegin*// <== insert before the element's content (prepend)
      <child>Content</child>
      <child>Content</child>
      <child>Content</child>
      <child>Content</child>
      Content
      *beforeend*// <== insert after the element's content (append)
  </element>
  *afterend* // <== insert after the element

代码片段

html,
body {
  height: 100%;
  width: 100%;
  background: black;
  font: 400 12px/1.2 Consolas;
}

main {
  height: auto;
  width: 90vw;
  border: 3px dashed red;
  background: black;
  color: white;
}

section {
  height: auto;
  width: 100%;
  border: 2px dotted white;
  background: rgba(181, 111, 0, .6);
}

div {
  border: 1px solid white;
  background: rgba(255, 30, 30, .3);
}

fieldset {
  display: table-row;
  width: 90%;
}

.bb {
  height: 30px;
  color: gold;
  border-color: gold;
}

.ab {
  height: 30px;
  color: lightgreen;
  border-color: lightgreen;
}

.be {
  height: 30px;
  color: #0022ef;
  border-color: #0022ef;
}

.ae {
  height: 30px;
  color: violet;
  border-color: violet;
}

<!doctype html>
<html>

<head>
  <link href='style.css' rel='stylesheet'>
</head>

<body>
  <header>
    <fieldset>
      <button onclick='bb()'>main beforebegin</button>
      <button onclick='ab()'>main afterbegin</button>
      <button onclick='be()'>main beforeend</button>
      <button onclick='ae()'>main afterend</button>
    </fieldset>
  </header>
  <main id='core' class='topic'>
    <article class='category'>
      <section id='I'>
        <p>CONTENT</p>
        <p>CONTENT</p>
        <p>CONTENT</p>
        <p>CONTENT</p>
      </section>
      <section id='1I'>
        <p>CONTENT</p>
        <p>CONTENT</p>
        <p>CONTENT</p>
        <p>CONTENT</p>
      </section>
    </article>
    <article class='category'>
      <section id='III'>
        <p>CONTENT</p>
        <p>CONTENT</p>
        <p>CONTENT</p>
        <p>CONTENT</p>
      </section>
    </article>
  </main>
  <footer class='footer'>

  </footer>
  <script>
    function bb() {
      document.querySelector('main').insertAdjacentHTML('beforebegin', '<div class="bb">This div has been inserted at position beforebegin</div>');
    }

    function ab() {
      document.querySelector('.topic').insertAdjacentHTML('afterbegin', '<div class="ab">This div has been inserted at position afterbegin</div>');
    }

    function be() {
      document.querySelector('#core').insertAdjacentHTML('beforeend', '<div class="be">This div has been inserted at position beforeend</div>');
    }

    function ae() {
      document.querySelector('main#core.topic').insertAdjacentHTML('afterend', '<div class="ae">This div has been inserted at position afterend</div>');
    }
  </script>
</body>

</html>

关于javascript - 如何将客户端渲染的 HTML 插入 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43600024/

24

4

0

文章推荐： javascript - 隐藏 CanvasJS 图表的标签？

文章推荐： javascript - Hubot 嵌套命令

sql - 哪个最快，1x 插入 512 行，4x 插入 128 行，或 512x 插入 1 行
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
sql:删除 + 插入 vs 更新 + 插入
已经提出了类似的问题，但由于它总是取决于，我单独询问我的具体情况。我有一个网站页面，显示来自数据库的一些数据，要从该数据库生成数据，我必须执行一些相当复杂的多连接查询。数据每天(每晚)更新一次。
python - pymongo 插入 vs pymysql 插入
我正在使用 MongoDb 和 MySQL 的 python 连接器 pymongo 和 pymysql 测试 MongoDb 和 MySQL，特别是插入功能。 pymongo版本是3.4，pymys
sql - 大型 SQL 插入 TVF 与 BULK 插入
从 C# 应用程序插入大型数组(10M 元素)的最快方法是什么？到目前为止，我使用的是批量插入。 C# 应用程序生成一个大文本文件，我使用 BULK INSERT 命令加载它。出于好奇，我编写了一个
java - 语法错误 : insert "enum Identifier", 插入 "EnumBody"，插入 "}"
我编写了一个枚举类型，当我为它运行我创建的 JUnit 测试时会出现以下语法错误: java.lang.Error: Unresolved compilation problems: Synt
C二叉搜索树实现——插入
我正在尝试创建一个程序，它将单词列表作为输入，并将它们排序为二叉树，以便能够找到它们，例如像字典。这是我到目前为止所做的，但是 newEl -> el = input; 出现段错误，我知道这是因为它试
latex - 缺少 $ 插入
你好我有编译这个问题 \begin{equation} J = \sum_{j=1}^{C} \end{equation} 我不断收到错误 missing $ inserted 这很奇怪，因
没有主键的 Linq 插入
我需要使用 LINQ to SQL 将记录插入到没有主键的表中。 table 设计得很差；我无法控制表结构。该表由几个 varchar 字段、一个文本字段和一个时间戳组成。它用作其他实体的审计跟踪。
插入 PdfCell 时图像会调整大小
我正在尝试使用 itextsharp 创建 Pdf。我添加了一张包含两列的表格，其中一列包含文本和其他图像。我想要恒定的图像大小如果另一个单元格中的文本增加并且其他单元格中的图像大小不同，我的图像会
php - 插入…………从中选择
我想把 calory 作为 fruits 的第一个值，我做不到，有人能帮忙吗？ $sql = 'INSERT INTO fruits VALUES('', ?, ?, ?)'
r - 插入/扩展季度到月度系列
我有一个包含季度观察结果的 data.frame。我现在想插入每月值(首选三次，线性很好)。中间目标应该是使用 DATE 创建一个 data.frame作为所有每月观察的索引和缺失值。谷歌搜索表明我
sql - 用数组“插入”
我想知道是否有办法在值列表中使用“插入”。我正在尝试这样做: insert into tblMyTable (Col1, Col2, Col3) values('value1', value
Javascript 插入 IFRAME
我想让人们能够在他们的网站中插入单个 Javascript 行，这实际上允许我插入包含我网站内容的固定大小的 IFRAME。它实际上是一个小部件，允许他们搜索我的网站或接收其他信息。这可能吗？最佳答
c# - 插入、选择和更新日期时间
我有一个包含时间的表，列名为 time，数据类型为 Date。在 asp.net 中，我想要一个查询插入日期，另一个查询则在 2 个日期之间进行选择。我已经尝试过这个: string data =
triggers - 触发编译错误(插入)
这是我的代码: create or replace trigger th after insert on stock for each row declare sqty number;
使用存储过程的具有唯一约束的 SQL 插入
这是一个带有具体示例的通用问题。我有一个包含三个字段(流派 ID (PK IDENTITY)、流派和子流派)的表。该表对(流派，子流派)组合具有唯一约束。我想知道如何修改存储过程以在表中不存在时插
Java:插入/替换到特定大小的排序数组
因此，我正在遍历二叉树，节点包含字符串，以及读取文件时该字符串是否出现多次。我只查找读取文件时出现次数最多的前 10 个单词，因此本质上我只是比较 int 值。我的问题是我正在尝试找出一种有效的方法
c++ - 插入 map
我有一张机票和行李 map ，每张门票必须是唯一的，并且必须与 map 上的位置相对应是否可以仅更改行李(m_bagage->秒)而不更改 key ？ std::unordered_map m_c
Java Jdbc 插入
我正在使用 jdbc 驱动程序做一个示例项目。我的问题是，如果我在 2 文本字段中输入空值。 null 不应该加载到数据库中吗？有没有办法避免在数据库中插入空字段？任何帮助将不胜感激。 //Execu
SSIS:插入/更新
我想知道 SSIS 中是否有特定的插入或更新选项。如果我想让程序检查它是更新还是插入，我是否必须做一些编码？或者是否可以启用一个选项，以便它会自行检查 PK 是否存在，然后更新，否则插入？亲切的问

首页

博学

6Ren·AI

商城