我刚刚在浏览器中使用类似pug,mustache,handlebars或dust的库呈现了一些HTML。例如，"<div><p>I'm text!</p></div>"。如何将客户端呈现的HTML插入DOM
如果我使用的是像React或Ember这样的框架，那么呈现的模板会自动插入到DOM中（由于虚拟DOM差异，插入的方式最少）。但是这些库只是给了我一串HTML。我如何使用它？
是否像找到所需的父DOM节点和设置innerHTML一样简单？是否有一个DOM差异库没有绑定到React中，我可以使用？
如果我重新渲染文本，并且它是相同的，插入到DOM应该理想是幂等的，甚至不会干扰事件事件处理程序。
...我已经有几个嵌套元素的字符串，并且希望将它添加到DOM。
您可以使用.innerHTML属性，但它有problems。更好的选择是一种类似.innerHTML的方法.insertAdjacentHTML()。它没有innerHTML所具有的problems，它的速度更快，并且您可以通过选项让您将字符串放置在/之前/之前/附加到/在之内。
签名
element.insertAdjacentHTML(position, text);位置确定其中文本转到相对于所述元件。它必须是下列值之一：
*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>非常酷！但是这会在每次运行时插入一个新的渲染模板副本。 – mgold
@mgold所以你只需要使用它一次，就好像编辑源时一样？还是你需要一些动态的东西？还是你想要一些互动和动态的东西？有一个[HTML 元素]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template）。 ES6还有[“标记的模板文字”]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals）。 – zer00ne
你想要的方式来添加HTML DOM的原生，但没有使用杂乱字符串？ '.createElement（TAG）' – zer00ne
不，我已经有几个嵌套元素的字符串了，并且想把它添加到DOM。 – mgold