Laconic: Cara Baru untuk Menjana Kandungan DOM dari JavaScript

Secara tradisinya, pemaju JavaScript menggunakan

atau innerHTML untuk menyuntik kandungan ke laman web. Contohnya: outerHTML

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

(nota: jQuery juga memanfaatkan

untuk manipulasi DOM.) Walaupun mudah, kaedah ini mempunyai batasan: innerHTML

rawan ralat: HTML yang tidak sah boleh menyebabkan kesilapan keras-ke-debug.
tidak konsisten penyemak imbas: Operasi kompleks pada nod DOM yang dihasilkan boleh menyebabkan isu-isu khusus pelayar.
tidak standard:
3. bukan standard dom w3c. innerHTML

Lebih kuat, walaupun verbose, alternatif adalah pendekatan berasaskan DOM:

<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>

Kaedah ini, sambil mematuhi piawaian, jauh lebih lama, lebih perlahan, dan masih mudah terdedah kepada kesilapan manusia.

Masukkan laconic, utiliti ringan yang menawarkan penyelesaian yang lebih elegan. Ia menggunakan sintaks JavaScript ringkas yang secara langsung memetakan ke html:

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

pengendalian atribut sama -sama menggunakan literal objek:

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

Laconic menyediakan medium gembira. Walaupun

tetap sesuai untuk tugas cepat, laconic cemerlang apabila innerHTML membuktikan bermasalah. Untuk maklumat lanjut dan muat turun, lihat: innerHTML

laconic on github
halaman contoh laconic

Soalan Lazim (Soalan Lazim) Mengenai Laconic dan JavaScript DOM Generasi Kandungan

Q: Apakah perbezaan antara dan innerHTML? createElement

secara langsung menetapkan kandungan HTML elemen, menawarkan kemudahan penggunaan tetapi kelemahan keselamatan dan prestasi yang berpotensi disebabkan oleh parsing HTML. innerHTML, sebaliknya, membina elemen DOM secara pemrograman, menghasilkan prestasi dan keselamatan yang lebih baik tetapi memerlukan lebih banyak kod. createElement

Q: Apakah alternatif moden untuk dan innerHTML? appendChild

menawarkan kawalan yang lebih tepat ke atas titik sisipan, dan literasi template menyediakan penciptaan rentetan HTML yang bersih. insertAdjacentHTML

Q: Bagaimana saya menggunakan dalam jQuery? createElement

fungsi JQuery's

bertindak sama dengan JavaScript's $(). Contohnya: createElement var newelement = $ (' <div>'); <p> <strong> Q: Kelebihan dan kekurangan <code> innerHtml <code>innerHTML vs createeelement <code>createElement?

innerHtml <code>innerHTML adalah mudah tetapi lebih perlahan dan kurang selamat. CreateeLement <code>createElement lebih cepat dan lebih selamat tetapi lebih verbose.

Q: Bagaimana menggunakan laconic untuk penjanaan kandungan DOM?

Laconic menawarkan sintaks ringkas untuk penciptaan DOM. Sebagai contoh: var newelement = $ .el.div ({class: 'MyClass'}, 'Hello, World!'); document.body.appendchild (newelement); <st> <code>var newElement = $.el.div({class: 'myClass'}, 'Hello, world!'); document.body.appendChild(newElement);