laconic：一種從JavaScript生成DOM內容的新方法

傳統上，JavaScript開發人員使用

或innerHTML將內容注入網頁。 例如：outerHTML

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

（注意：jQuery也利用DOM操作。

innerHTML易於錯誤：無效的HTML可能導致難以刪除錯誤。

瀏覽器不一致：對結果的DOM節點上的複雜操作可能會引起瀏覽器特定問題。 >
1. 非標準：
不是W3C DOM標準。
一種更健壯的，儘管冗長，替代方案是基於DOM的方法：>
3. innerHTML這種方法雖然遵守標準，但更長，較慢，仍然容易受到人為錯誤的影響。
>輸入Laconic，這是一種提供更優雅的解決方案的輕量級實用程序。 它使用簡潔的JavaScript語法，該語法將直接映射到HTML：

使用對象文字：

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

登入後複製

仍然適合快速任務，但當

證明有問題時，LaConic會出色。有關更多詳細信息和下載，請參見：

github上的laconic

$.el.p(
    "Here's some new ",
    $.el.strong("DOM"),
    " content."
).appendTo(document.getElementById("container"));

間隙示例頁

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

innerHTML經常詢問有關laconic和javascript dom內容生成的問題（常見問題解答） innerHTML

Q：>？

>

直接設置元素的HTML內容，可易於使用，但由於HTML解析而引起的潛在安全性和性能弊端。 另一方面，通過編程構建DOM元素，從而獲得更好的性能和安全性，但需要更多代碼。

問：>和

>？

innerHTML>createElement提供對插入點的更精確的控制，模板文字提供了清潔器html字符串創建。

問：我如何在jQuery？ innerHTML> jQuery的createElement函數的作用與JavaScript的

相似。例如：

var newelement = $（'innerHTML>'）;

Q： Innerhtml <cody> vs. <code> createElement <code>innerHTML？ createElement

> 的優點和缺點 <p> <code> innerhtml<code>innerHTML很簡單，但較慢且安全較低。 createElement<code>createElement更快，更安全，但更詳細。

>

Q：如何將laconic用於DOM內容生成？ var newElement = $ .El.div（{class：'myclass'}，'hello，world！'）; document.body.body.appendchild（newElement）;

以上是laconic：一種從JavaScript生成DOM內容的新方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！