Question

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

如果我使用像React或Ember这样的框架，渲染的模板将自动插入到DOM中（由于虚拟DOM差异，以最小的方式）。但是这些库只给我一串HTML。我该如何使用它？

是否像找到所需的父DOM节点并设置innerHTML一样简单？是否有一个DOM差异库没有与我可以使用的React绑定？

[edit]如果我重新渲染文本，并且它是相同的，插入DOM理想情况下应该是幂等的，甚至不会干扰事件事件处理程序。

Answer 1

...我已经拥有了几个嵌套元素的字符串，并希望将其添加到DOM中。

您可以使用.innerHTML属性，但它有problems。更好的替代方法是.innerHTML称为.insertAdjacentHTML()的方法。它没有innerHTML element.insertAdjacentHTML(position, text);具有的problems，速度更快，并且您可以选择允许您将字符串放在/之后/ prepend / append上/ 元素。

特征

*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;
}

段

＆＃13;

<!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>

＆＃13;

{
  "compilerOptions": {
    "target": "es5",
    "typeRoots": ["node_modules/@types/"],
    "types": [
      "node",
      "es6-shim"
    ]
  }
}

＆＃13;

如何将客户端呈现的HTML插入DOM

1 个答案:

特征

段