LACONIC：JavaScriptからDOMコンテンツを生成する新しい方法

伝統的に、JavaScriptの開発者はinnerHTMLまたはouterHTMLを使用して、Webページにコンテンツを注入していました。 たとえば、

<code class="language-javascript">var container = document.getElementById("container");
container.innerHTML = "<p>Here's some new <strong>DOM</strong> content.</p>";</code>

（注：jqueryもレバレッジinnerHTML。）便利ですが、この方法には制限があります。

エラーが発生しやすい：無効なhtmlは、壊れが難しいエラーにつながる可能性があります。
ブラウザの不一致：結果のDOMノードの複雑な操作は、ブラウザ固有の問題を引き起こす可能性があります。
2. 標準以外：
はW3C DOM標準ではありません。
3. innerHTML
より堅牢で、冗長ではありますが、代替案はDOMベースのアプローチです。

この方法は、基準に準拠していますが、かなり長く、遅く、人為的誤りの影響を受けやすいです。

よりエレガントなソリューションを提供する軽量のユーティリティであるLaconicを入力してください。 HTMLに直接マッピングする簡潔なJavaScriptの構文を使用します：

<code class="language-javascript">var newpara = document.createElement("p");
var newstrong = document.createElement("strong");
newstrong.appendChild(document.createTextNode("DOM"));
newpara.appendChild(document.createTextNode("Here's some new "));
newpara.appendChild(newstrong);
newpara.appendChild(document.createTextNode(" content."));

var container = document.getElementById("container");
container.appendChild(newpara);</code>

属性処理は、オブジェクトリテラルを使用して等しく簡単です：

<code class="language-javascript">$.el.p(
    "Here's some new ",
    $.el.strong("DOM"),
    " content."
).appendTo(document.getElementById("container"));</code>

laconicは幸せな媒体を提供します。

は迅速なタスクに適したままですが、

が問題になることが証明された場合、ラコンは卓越しています。詳細とダウンロードについては、

<code class="language-javascript">// Generates <div class="example"><div>Content</div></div>
$.el.div(
    { "class": "example"},
    $.el.div("Content")
);</code>

を参照してください

Github innerHTMLのinnerHTML laConic

ラコンな例ページ

• ラコニックおよびJavaScript DOMコンテンツ生成に関するよくある質問（FAQ）

Q：

と？

の違いは何ですか

は、要素のHTMLコンテンツを直接設定し、使いやすさを提供しますが、HTMLの解析によりセキュリティとパフォーマンスの欠点を潜在的に提供します。 一方、innerHTMLは、プログラムでDOM要素を構築し、パフォーマンスとセキュリティが向上しますが、より多くのコードが必要です。 createElementQ：

および

？innerHTMLcreateElementの現代的な代替案は何ですか

挿入ポイントをより正確に制御し、テンプレートリテラルはクリーナーHTML文字列作成を提供します。 innerHTMLQ：jquery？appendChild ​​で

を使用するにはどうすればよいですか

jQueryのinsertAdjacentHTML関数は、javascriptの

と同様に機能します。例：

var newElement = $（ ' createElement'）;

Q： innerhtml <code>innerHTMLvs. createElementの利点と短所<code>createElement？

innerhtml<code>innerHTMLはシンプルですが、遅く、安全性が低くなります。 createElement<code>createElementはより速く、より安全ですが、より冗長です。

Q：DOMコンテンツ生成にLaConicを使用する方法？ LaConicは、DOM作成のための簡潔な構文を提供します。 例： var newelement = $ .el.div（{class： 'myclass'}、 'hello、world！'）; document.body.appendChild（newElement）;

以上がLACONIC：JavaScriptからDOMコンテンツを生成する新しい方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。