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

最新推荐文章于 2022-10-21 13:43:57 发布
最新推荐文章于 2022-10-21 13:43:57 发布
阅读量1k 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KEY2018/article/details/106973883
版权

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

创建原理：

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

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

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

4.重复上述过程多次

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

创建原理：

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

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

小森呀
关注
专栏目录
通过案例说明innerHTML和createElement()创建多个元素的效率问题
qq_46071321的博客
08-05 1326
以下测试，都是在创建相同元素下进行比较的 <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创建元素
双木荼的博客
05-11 4329
用.innerHTML偷懒创建元素
使用innerHTML动态生成标签
想要全栈chris的博客
02-16 1726
var users = [ {"name": "tdxy01","icon":"images/noavatar_small.gif"}, {"name": "沉眠楚人","icon":"images/noavatar_small.gif"}, {"name": "爱上karina","icon":"images/75_avatar_small.jpg"
innerHTML动态添加标签的注意事项
weixin_30836759的博客
06-10 1080
　　在使用javascript动态添加页面上元素时，我们经常会使用DOM去逐个地将节点添加到文档碎片中，再将整个文档节点添加到DOM树中。其实还有一种方法动态添加元素：innerHTML。 　　我最近要将一大段的元素添加到页面 　　方法很简单，就是将要添加的HTML语句用“”包裹起来。但是，我尝试了几次发现没有成功。 原因就是没有将HTML语句中空格和tab清除。而直接将其放入“”中。 　...
JS中使用innerHTML和createElement方式动态创建元素
weixin_33743703的博客
06-18 2648
方式一：使用innerHTML拼接字符串方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
javascript中createElement的两种创建方式
10-24
首先，通过 `document.createElement` 方法创建一个 input 元素，然后设置其类型为按钮 (`type="button"`)，并赋予相应的值 (`value="我是动态创建的1"`)。为了实现点击按钮时的交互效果，通过 `onclick` 事件属性...
innerHTML动态添加html代码和脚本兼容多个浏览器
09-04
通过这种方式，当调用`document.write`时，实际上会创建一个新的div元素，将参数传入`set_innerHTML`函数，确保内容被安全地添加到页面中，而不会破坏现有的DOM结构。 总结起来，innerHTML动态添加HTML代码和脚本时...
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插入，这不就有问题了，为了方便不同编码风格的人，我...
html可以插入多个表格吗,在一个html表格行中插入多个html单元格
weixin_35276012的博客
06-17 1145
在一个html表格行中插入多个html单元格。下面的代码将单元格添加到一行中。在一个html表格行中插入多个html单元格HtmlTable MyTable = new HtmlTable();HtmlTableRow row = new HtmlTableRow();HtmlTableCell cell = new HtmlTableCell();cell = (new HtmlTableCel...
Web APIs：节点操作（创建元素的三种方式与区别）及总结
薛定谔的猫
10-21 333
3. 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、 nextElementSibling)innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。注意：我们获取过来的DOM元素是 一个对象（object），所以称为文档对象模型。3. 修改表单元素： value、type、disabled等。1. 修改元素属性： src、href、title等。关于dom操作，我们主要针对于元素的操作。
innerHTML给标签添加样式
Megamind_HL的博客
01-05 8683
在我们日常开发中，很多时候都需要用innerHTML来生成标签，这个在我上一篇文章中已经写出怎么生成table标签，接下来是怎么生成样式，以下给出具体实现代码： //这里我还是用table作为示范； &lt;table id="settleDlgGrid" border="1" cellspacing="0" cellpadding="0"&gt;&lt;/table&gt; va
innerHTML 与 createElement() 的效率比较
GoodLuck_wu5的博客
04-28 549
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 321
innerHTML 是将内容写入某个 Dom节点 不会导致页面全部重绘 innerHTML 创建多个元素效率更高(不要拼接字符串 采取数组形式拼接) 结构稍微复杂 createElement 创建多个元素效率稍微低一点 但是结构更清晰 结构 <div>123</div> <div class="inner"></div> <div class="create"></div> <button>按下</butt..
js创建标签与内容并加上样式
最新发布
09-11
在JavaScript中创建标签（元素）、添加内容以及应用样式可以通过以下几个步骤来完成： 1. 创建标签：可以使用`document.createElement`方法来创建一个新的元素。例如，`var div = document.createElement('div');` 将会创建一个新的`div`元素。 2. 添加内容：可以使用`innerHTML`属性或者`appendChild`方法来为创建的标签添加内容。`innerHTML`可以插入HTML格式的字符串，而`appendChild`可以添加一个节点。 3. 应用样式：可以通过元素的`style`属性来直接修改其样式，或者创建一个`<style>`标签来添加CSS样式。使用`style`属性时，CSS属性需要使用驼峰命名法。 下面是一个简单的示例代码，展示如何创建一个`<p>`元素，添加一些文本内容，并为其添加内联样式： ```javascript // 创建一个新的<p>元素 var p = document.createElement('p'); // 给<p>元素添加内容 p.textContent = '这是一个段落'; // 给<p>元素应用内联样式 p.style.color = 'red'; p.style.fontWeight = 'bold'; // 将创建的元素添加到文档的body中 document.body.appendChild(p); ``` 如果想要创建一个样式表来应用到页面中的多个元素，可以这样做： ```javascript // 创建一个新的<style>元素 var style = document.createElement('style'); // 将样式内容添加到<style>元素中 style.innerHTML = ` .my-class { color: blue; font-size: 14px; } `; // 将<style>元素添加到文档的<head>中 document.head.appendChild(style); // 现在可以使用.my-class来给元素添加样式了 var div = document.createElement('div'); div.classList.add('my-class'); document.body.appendChild(div); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值