如何将客户端渲染的HTML插入DOM [英] How to insert client-rendered HTML into DOM
问题描述
我刚刚使用 pug 之类的库在浏览器中呈现了一些HTML。 ，胡子，车把或灰尘。例如，< div>< p>我是文本！< / p>< / div> 。
I've just rendered some HTML in the browser using a library like pug, mustache, handlebars, or dust. For example, "<div><p>I'm text!</p></div>".
如果我使用的是React或Ember之类的框架，则呈现的模板将自动插入DOM（由于虚拟DOM差异而以最小侵入性的方式）。但是这些库只给了我一串HTML。我该怎么用？
If I was using a framework like React or Ember, the rendered template would automatically be inserted into the DOM (in the least invasive way due to virtual DOM diffing). But these libraries just give me a string of HTML. How do I use that?
找到所需的父DOM节点并设置 innerHTML 一样简单吗？我可以使用没有绑定到React的DOM差异库吗？
Is it as simple as finding the desired parent DOM node and setting innerHTML? Is there a DOM diffing library not tied into React that I can use?
[edit]如果我重新渲染文本，并且相同，理想情况下，插入DOM应该会
[edit] If I rerender the text, and it's the same, inserting into the DOM should ideally be idempotent, and not even disturb event event handlers.
推荐答案
... I已经有几个嵌套元素的字符串，并想将其添加到DOM中。
您可以使用 .innerHTML 属性，但它具有问题。更好的替代方法是称为 .insertAdjacentHTML（） 。它没有 innerHTML的问题 具有更快的速度，并且您可以使用一些选项将字符串放在元素之前/之后/前缀/附加中。
You can use .innerHTML property, but it has problems. A better alternative is a method that's like .innerHTML called .insertAdjacentHTML(). It doesn't have the problems that innerHTML has, it's faster, and you have options that allow you to place your string before/after/prepend/append on/in an element.
签名
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
片段
Snippet
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>
这篇关于如何将客户端渲染的HTML插入DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
