Laconic：从JavaScript生成DOM内容的新方法

可以使用innerHTML或outsideHTML将内容插入页面中。

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

（请注意，jQuery还使用innerHTML进行DOM内容操作）。

它既快速又容易-但并非没有问题：

可以插入无效HTML字符串，这使得错误很难发现和调试。
如果您尝试复杂的活动，例如在结果DOM内容中使用或修改节点，则可能会遇到浏览器问题。
尽管得到了很好的支持，但innerHTML是专有技术，不是W3C DOM的一部分。它冒犯了标准的众神。

因此，让我们看一下基于DOM的替代方案：

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

讨厌。它的时间长了三倍，执行起来较慢，而且仍然容易发生人为错误。

几年前，我设计了自己的解决方案BetterInnerHTML ，它将HTML字符串作为XML加载，递归了结构并将适当的节点插入DOM。它起作用了，但是我对性能或诸如HTML实体之类的问题从未完全满意。

幸运的是，乔·斯特尔马赫（Joe Stelmach）设计了一个替代方案。这是一个名为Laconic的小型独立实用程序，它使用逻辑JavaScript表示法直接映射到HTML，例如

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

使用对象文字表示法支持属性：

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

我喜欢。虽然innerHTML仍然是快速而肮脏的DOM内容生成的最佳选择，但Laconic在无法正常工作的那些奇怪情况下将非常有用。

有关更多信息和下载，请参考：

GitHub上的Laconic
简单的示例页面

翻译自: https://www.sitepoint.com/laconic-javascript-dom-content-generation/

Laconic：从JavaScript生成DOM内容的新方法相关推荐

vue+vite项目当中：介绍一种生成助记词新方法，兼容以太坊
在上一篇文章当中我介绍了使用bip39生成助记词,在vue3不同的框架vite.vue-cli当中引入配置的方法.虽然可以生成助记词但是,需要进行大量的配置,尤其是在vite+ES6+vue3项目当 ...
你可能不知道的JavaScript 遍历DOM的几种方法
最近看到一篇关于前端优化方面的文章,里面提到了几点对DOM遍历操作的优化,文章只是一笔带过,并没有深入的讲解. 其中提到了几个优化的手段,乍一看似乎没见过,然后再仔细想想,其实无论是犀牛书还是红宝书都 ...
JavaScript之DOM常用属性及方法详解
一.什么是DOM? DOM:文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口. W3C 已经定义了 ...
JavaScript生成uuid的四种方法
在开发过程中,有时候需要js生成全局唯一标识符,在java中可以使用uuid,但是JS中没有现成的函数.总结了一下,JS生成唯一标识符的几种方法. 第一种 function guid() {retur ...
Dom基础特殊的节点获取元素节点的内容获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
html5新增标记元素的内容类型,HTML5新标签与javaScript新方法
HTML5 (0106) 1.文档声明 2.字符编码设置 3.验证(http://validator.w3.org/) HTML5新增的语义化标签 1.语义化标签:说明页面内容,便于搜索引擎寻找该内容 ...
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
dhtml_DHTML乌托邦：使用JavaScript和DOM的现代Web设计
dhtml 动态HTML(简称DHTML)是一组Web开发技术的名称,这些技术主要用于具有非平凡用户输入功能的Web页面. DHTML意味着处理HTML文档的文档对象模型,在样式信息中摆弄CSS指令, ...

Laconic：从JavaScript生成DOM内容的新方法

Laconic：从JavaScript生成DOM内容的新方法相关推荐

最新文章

热门文章