innerHTML与createElement()创建多个标签的区别

最新推荐文章于 2022-10-21 13:43:57 发布
原创 最新推荐文章于 2022-10-21 13:43:57 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了使用innerHTML和createElement方法在网页开发中创建多个标签的性能差异。innerHTML方法通过字符串操作更新DOM，而createElement则采用批量创建和插入的方式，后者在大量元素创建时展现出更高的效率。

innerHTML创建多个标签 ：（性能消耗高）

创建原理：

1.将元素内部原来所有的内容全部取出

2.将需要添加的内容与取出的内容拼接

3.将拼接后的内容覆盖到原来的元素中

4.重复上述过程多次

createElement()创建多个标签：（性能消耗低）

创建原理：

1.一次性创建多个标签（创建的标签是虚拟的，并未添加到元素内部）

2.将创建的标签添加到元素内部

javascript中createElement的两种创建方式
10-24
首先，通过 `document.createElement` 方法创建一个 input 元素，然后设置其类型为按钮 (`type="button"`)，并赋予相应的值 (`value="我是动态创建的1"`)。为了实现点击按钮时的交互效果，通过 `onclick` 事件属性...
innerHTML动态添加html代码和脚本兼容多个浏览器
09-04
通过这种方式，当调用`document.write`时，实际上会创建一个新的div元素，将参数传入`set_innerHTML`函数，确保内容被安全地添加到页面中，而不会破坏现有的DOM结构。 总结起来，innerHTML动态添加HTML代码和脚本时...
用innerHTML创建元素
双木荼的博客
05-11 4414
用.innerHTML偷懒创建元素
使用innerHTML动态生成标签
想要全栈chris的博客
02-16 1802
var users = [ {"name": "tdxy01","icon":"images/noavatar_small.gif"}, {"name": "沉眠楚人","icon":"images/noavatar_small.gif"}, {"name": "爱上karina","icon":"images/75_avatar_small.jpg"
通过案例说明innerHTML和createElement()创建多个元素的效率问题
qq_46071321的博客
08-05 1380
以下测试，都是在创建相同元素下进行比较的 <div style="width:100px;height:2px;border:1px solid blue;"></div> 1.采用innerHTML拼接元素 function fn() { var d1 = +new Date(); var str = ''; for (var i = 0; i < 1000; i++) {
innerHTML动态添加标签的注意事项
weixin_30836759的博客
06-10 1117
　　在使用javascript动态添加页面上元素时，我们经常会使用DOM去逐个地将节点添加到文档碎片中，再将整个文档节点添加到DOM树中。其实还有一种方法动态添加元素：innerHTML。 　　我最近要将一大段的元素添加到页面 　　方法很简单，就是将要添加的HTML语句用“”包裹起来。但是，我尝试了几次发现没有成功。 原因就是没有将HTML语句中空格和tab清除。而直接将其放入“”中。 　...
JS中使用innerHTML和createElement方式动态创建元素
weixin_33743703的博客
06-18 2723
方式一：使用innerHTML拼接字符串方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
createElement动态创建HTML对象脚本代码
09-06
创建表格涉及多个元素，包括`<table>`、`<tbody>`、`<tr>`和`<td>`。以下代码创建了一个9x9的红色边框表格： ```javascript function createTable(width, height, rows, cols) { var table = document....
精选资源
解决IE下select标签innerHTML插入option的BUG（兼容IE,FF,Opera,Chrome,Safari)
01-19
由于我一直是用createElement来创建动态的option并添加，所以一直没有遇到这个问题，但是每个人写代码风格不同，有的人就喜欢写字符串形式的标签并用innerHTML插入，这不就有问题了，为了方便不同编码风格的人，我...
document.createElement创建一个元素如何在此元素上再加一个
最新发布
08-05
可以定义一个函数 `elt()`，该函数接受一个标签名和多个子节点作为参数，并将这些子节点添加到新创建的元素中： ```javascript function elt(tagName, ...children) { let node = document.createElement(tagName)...
html可以插入多个表格吗,在一个html表格行中插入多个html单元格
weixin_35276012的博客
06-17 1209
在一个html表格行中插入多个html单元格。下面的代码将单元格添加到一行中。在一个html表格行中插入多个html单元格HtmlTable MyTable = new HtmlTable();HtmlTableRow row = new HtmlTableRow();HtmlTableCell cell = new HtmlTableCell();cell = (new HtmlTableCel...
Web APIs：节点操作（创建元素的三种方式与区别）及总结
薛定谔的猫
10-21 384
3. 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、 nextElementSibling)innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。注意：我们获取过来的DOM元素是 一个对象（object），所以称为文档对象模型。3. 修改表单元素： value、type、disabled等。1. 修改元素属性： src、href、title等。关于dom操作，我们主要针对于元素的操作。
innerHTML给标签添加样式
Megamind_HL的博客
01-05 8880
在我们日常开发中，很多时候都需要用innerHTML来生成标签，这个在我上一篇文章中已经写出怎么生成table标签，接下来是怎么生成样式，以下给出具体实现代码： //这里我还是用table作为示范； &lt;table id="settleDlgGrid" border="1" cellspacing="0" cellpadding="0"&gt;&lt;/table&gt; va
innerHTML 与 createElement() 的效率比较
GoodLuck_wu5的博客
04-28 607
element.innerHTML 和 document.createElement() 都可以创建元素。 1、element.innerHTML 创建多个元素有两种方式： ①拼接字符串的方式： var inner = document.querySelector('.inner'); for (var i = 0; i <= 100; i++) { inner.innerHTML += ...
JavaScript-179：三种创建元素
臧小川的博客
01-20 356
innerHTML 是将内容写入某个 Dom节点 不会导致页面全部重绘 innerHTML 创建多个元素效率更高(不要拼接字符串 采取数组形式拼接) 结构稍微复杂 createElement 创建多个元素效率稍微低一点 但是结构更清晰 结构 <div>123</div> <div class="inner"></div> <div class="create"></div> <button>按下</butt..
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值