pug、mustache、handlebars、またはdustのようなライブラリを使用してブラウザでHTMLをレンダリングしました。たとえば、"<div><p>I'm text!</p></div>"です。クライアントレンダリングされたHTMLをDOMに挿入する方法
私がReactやEmberのようなフレームワークを使用していた場合、レンダリングされたテンプレートは自動的にDOMに挿入されます（仮想DOMの差分のために最も侵襲的な方法で）。しかし、これらのライブラリは私にHTMLの文字列を与えるだけです。それをどうやって使うのですか？
目的の親DOMノードを見つけて、innerHTMLを設定するだけで簡単ですか？私が使用できるReactに結び付けられていないDOM diffingライブラリがありますか？
私はテキストを再レンダリングしても同じですが、DOMに挿入するのは理想的には冪等でなければならず、イベントイベントハンドラにも影響を与えません。
...私はいくつかのネストされた要素の文字列をすでに持っており、それをDOMに追加したいと考えています。
あなたは.innerHTMLプロパティを使用することができますが、それはproblemsを持っています。より良い代替方法は、.insertAdjacentHTML()と呼ばれる.innerHTMLのような方法です。 problemsにはinnerHTMLが含まれていません。より速く、の前/後/前/後にの要素を配置するオプションがあります。
署名
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ソースを編集するときと同じように1回だけ使う必要がありますか？それとも、ダイナミックなものが必要でしたか？それとも、インタラクティブかつダイナミックなものを求めていましたか？ [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
あなたはネイティブではなく乱雑文字列を使用せずにDOMにHTMLを追加する方法をしたいですか？ '.createElement（TAG）' – zer00ne
いいえ、いくつかのネストされた要素の文字列を既に持っていて、それをDOMに追加します。 – mgold