我刚刚使用像 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/