laconic：一种从JavaScript生成DOM内容的新方法

传统上，JavaScript开发人员使用

或innerHTML将内容注入网页。 例如：outerHTML

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

（注意：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

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

间隙示例页

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

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中文网其他相关文章！