创建元素 innerHTML与document.createElement() 的区别

已于 2022-03-10 09:14:04 修改
阅读量479 收藏 1
点赞数 1
分类专栏： 前端面试 文章标签： javascript 前端 面试 js
于 2021-03-09 13:06:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiu_Xiu_cdx/article/details/114579534
版权

WebAPI中，document.write() 、 innerHTML与document.createElement() 三种创建元素方式的区别：

1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘（即其他元素全部消失，重新创建一个只有这个新建元素的页面）
var btn = document.querySelector('button');btn.onclick = function() {document.write('123');}

2. innerHTML 创建元素
var inner = document.querySelector('.inner');for (var i = 0; i <= 100; i++) {inner.innerHTML += '百度' //此处为拼接字符串新式}var arr = [];for (var i = 0; i <= 100; i++) {arr.push('百度');}inner.innerHTML = arr.join('');

3. document.createElement() 创建元素
var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);}

总结：

  1. document.write()是直接将内容写入页面的内容流，文档执行完毕，则它会导致页面重绘
  2. innerHTML字符串拼接方式效率特别低，
  3. 但innerHTML数组方式(数组ioin方式拼接)创建多个元素效率更高，结构稍微复杂一点
    createElement方式创建多个元素效率稍低一点，但是结构更清晰

ps：面试中问到的innerHTML与createElement创建方式的区别：可以从innerHTML是采用字符串拼接还是数组形式拼接和其结构来说

是芊芊吖
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
innerHTML与document.createElement性能对比
涔曦的博客
03-16 684
动态创建元素的方式： document.write()或document.writeln(); document.createElement(); ele.innerHTML; document.write(string); /** * 若是在页面加载完成后，执行document.write()方法，会覆盖页面内容。 * 很少使用到 */ innerHTML性能问题： 不推荐i...
innerHTML vs createElement
weixin_34319999的博客
01-21 178
WilsonLiu's blog 首发地址两者生成dom的方式有什么优劣呢？首先让我们看一个小问题再引入正题～ 如何重复插入一个相同的html结构呢？ //错误的 window.onload = function(){ var el = document.createElement('div'); el.appendChild(docum...
innerHTML 和 createElement()的区别
qq_55464378的博客
06-29 221
> innerHTML。是将内容写入某个DOM节点，不会导致页面全部重绘 innerHTML创建多个元素效率更高(不要拼接字符串,拼接字符串很耗时间，采取数组形式拼接），结构稍微复杂 var arr = [] for (var i = 0; i <= 100; i++){ arr.push( '<a href="#">百度</a> '); } inner.innerHTML =arr.join('') createElement ()创建多个元素效率稍低一点点，但..
js创建子元素：innerHTML与document.createElement()
wsj2311161832的博客
01-24 3906
建议（创建少量元素时）： 1.当父元素里没有其他元素，或者只添加少量行内元素或行内块元素时用innerHTML。 原因：此时不会破坏父元素内的整体布局，并且只添加如a标签、span标签这些行内元素时，用innerHTML更加快捷。 2.当父元素里已经布局了其他元素，并且添加有样式块元素时用document.createElement()。 原因：用document.createElement()创建元素插入顺序，可以通过elemen...
JS中 innerHTML和createElement的区别
shane的博客
03-03 863
在DOM节点操作中，innerHTML和createElement都可以实现创建元素。它们实现的功能类似，但是效率却相差很大 1. innerHTML字符串拼接方式 function fn() { var d1 = +new Date(); var str = ''; for (var i = 0; i < 1000; i++) { document.body.innerHTML += '<div style="width:100px; height
document.createElement()用法
09-05
`document.createElement()` 是JavaScript中的一个核心方法，用于在DOM（Document Object Model）中动态创建新的元素节点。这个方法允许开发者在网页加载后根据需要添加新的HTML元素，为页面增加交互性和动态性。它...
Javascript createElement和innerHTML增加页面元素的性能对比
10-29
在某些情况下，`createElement`方法可能比`innerHTML`更快，因为`innerHTML`需要解析整个字符串，而`createElement`只需创建单个元素。然而，性能差异取决于具体的操作和环境。例如，如果要在页面上一次性添加大量...
JS document对象简单用法完整示例
10-15
- `document.createElement()`：创建新的HTML元素。 - `document.createTextNode()`：创建文本节点。 - `appendChild()`/`removeChild()`：向元素添加或删除子节点。 - `innerHTML`/`outerHTML`：获取或设置元素...
document.open() 与 [removed]()的区别
12-10
现在更常见的是使用DOM操作API，如 `createElement`、`appendChild` 和 `innerHTML` 属性等，这些方法允许在不破坏现有页面结构的情况下动态修改页面内容。 总结来说，`document.open()` 主要用来替换或初始化整个...
读Ext之十一（通过innerHTML创建元素）
zhouruitao的专栏
01-09 194
innerHTML 这个由 IE 引入的属性成了事实标准，各浏览器均支持。尽管html4中没有承认它，但html5已经正式将其纳入 。 我们知道任何一个库都少不了DOM操作，因为用JS操作DOM（早期微软称DHTML）是日常开发中最基本的工作之一。 这篇主要讲述Ext.DomHelper中的 createHtml 函数。首先Ext.DomHelper为一个单例对象。使用其时可沿用Ext库...
JavaScript createElement 和 innerHTML 效率比较
weixin_33908217的博客
07-01 185
2019独角兽企业重金招聘Python工程师标准>>> ...
innerHTML和createElement创建元素哪一个效率会更高？
abcccc1111901的博客
02-20 690
innerHTML和createElement创建元素哪一个效率会更高
JavaScript三种动态元素创建的区别：document.write()；element.interHTML（）；document.createlement()
11-20 1601
JavaScript三种动态元素创建的区别：document.write();element.interHTML（）；document.createlement()
innerHTML和createElement的效率问题
lxllxl211的博客
11-10 232
3.innerHTML创建多个元素效率更高（不要采取拼接字符串，采取数组形式拼接）4.createElement（）创建多个元素效率稍微低一点点，但是结构清晰。1.如果页面流加载完毕，再调用document.write会导致页面重绘。2.innerHTNML是将内容写到某个DOM中，不会导致页面全部重绘。
JavaScript innerHTML和createElement效率对比
火星基地
10-24 446
前言： 在DOM节点操作中，innerHTML和createElement都可以实现创建元素。它们实现的功能类似，但是效率却相差很大。本文分别统计用innerHTML字符串拼接方式、innerHTML数组方式和createElement方式创建1000次元素的时间，来比较它们之间效率的高低。 比较思路： 使用new调用创建日期对象 完成1000次创建相同元素后的时间，减去创建之前的时间，即为过程所用的时间（单位：ms） 比较三种方式所用的时间 比较过程： 1. innerHTML字符串拼接方式 代码：
write、innerHTML、createElement区别
weixin_45631722的博客
07-18 1391
write、innerHTML、createElement区别 1、 document.write() 创建元素 document.write 是直接将内容写入页面的内容流，但是页面文档流加载完毕，再调用这句话会导致页面重绘。 如下面代码： <button>点击</button> <p>abc</p> <div class="inner"></div> <div class="create">&l
innerHTML 与 createElement() 的效率比较
GoodLuck_wu5的博客
04-28 507
element.innerHTML 和 document.createElement() 都可以创建元素。 1、element.innerHTML 创建多个元素有两种方式： ①拼接字符串的方式： var inner = document.querySelector('.inner'); for (var i = 0; i <= 100; i++) { inner.innerHTML += ...
innerHTML和creatElement创建元素的区别
tangyuan97的博客
01-22 487
<ul > <li class="ul"></li> <li></li> </ul> <script> var ul=document.querySelector('.ul') //innerHTML使用拼接字符串的方式创建新的...
innerHTML与createElement创建元素效率对比
apple_54470279的博客
04-26 204
总结：执行效率对比：innerHTML() 数组转字符串 > createElement() > innerHTML() 拼接字符串。如果只是单纯的创建元素而不添加样式时，前两者的执行效率基本相等。createElement() 的代码结构更清晰。
document.createElement('a')
最新发布
04-04
document.createElement('a') 是 JavaScript 中的一个方法，用于创建一个新的 HTML 元素节点。在这个特定的例子中，它创建了一个 `<a>`（锚点）元素节点。 `document.createElement('a')` 方法返回一个新创建的 `<a>` 元素节点，但是它并没有被添加到文档中。你可以通过其他 DOM 操作将它添加到文档中的任何位置。 这个方法可以用于动态地创建和添加链接到你的网页中。你可以设置 `<a>` 元素的属性，如 href、target、innerHTML 等，以及添加事件监听器等。 以下是一个示例代码，展示了如何使用 `document.createElement('a')` 方法创建一个链接元素并将其添加到文档中： ```javascript // 创建 <a> 元素 var link = document.createElement('a'); // 设置链接的属性 link.href = 'https://www.example.com'; link.target = '_blank'; link.innerHTML = '点击这里'; // 将链接添加到文档中的某个元素中 var container = document.getElementById('container'); container.appendChild(link); ``` 这样，就会在 id 为 "container" 的元素中创建一个新的链接。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值