JS学习笔记之三种动态创建元素区别

最近在学习JavaScript的时候动态创建元素区别的内容将笔记分享给大家

文章目录

  • 前言
  • 一、三种方法:
    • 1.代码如下:
    • 2.分析:
  • 二、innerHTML和document.createElement创建元素
    • 1.代码如下:
    • 2.分析:
  • 总结


前言

JS有三种方法来创建动态元素,分别是:
1.document.write()
2.innerHTML
3.document.createElement()


一、三种方法:

1.代码如下:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .inner {
      
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .create {
      
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    style>
head>

<body>
    <button>按钮button>
    <div>hahahadiv>
    <div class="inner">div>
    <div class="create">div>
    <script>
        // 三种创建元素方式区别
        // 1.document.write
        // 获取元素
        var btn = document.querySelector('button');
        // 注册事件
        btn.onclick = function () {
      
            document.write('
write添加的
'
); } // 2.innerHTML 创建元素 var inner = document.querySelector('.inner'); inner.innerHTML = '链接'; // 3.document.createElement()创建元素 var create = document.querySelector('.create'); var a = document.createElement('a'); // 添加子节点 create.appendChild(a);
script> body> html>

2.分析:

运行效果:
JS学习笔记之三种动态创建元素区别_第1张图片
在这里插入图片描述

我们动态创建元素的方式有以上三种,我们可以看到三种方式都相应地创建了元素。
当我们点击按钮时会出现界面值剩下write添加的这个盒子,
为什么呢这是因为document.write 创建元素 如果页面文档流加载完毕,再调用这句话会导致页面重绘。
(重绘的意思就是页面给我们重新绘制了一个新的HTML页面)所以这种创建元素的方式不太好。
单个元素创建看不出另外两种方法的区别下面我们就通过多元素创建来讨论一下另外两种创建元素方式的区别。

二、innerHTML和document.createElement创建元素

1.代码如下:

innerHTML第一种方式:

//innerHTML拼接字符串方式
        function fn() {
     
            var d1 = +new Date();
            var str = '';
            for (var i = 0; i < 1000; i++) {
     
                // 通过拼接字符串方式循环创建盒子
                document.body.innerHTML += '
'
; } var d2 = +new Date(); console.log('innerHTML拼接字符串方式耗时:'+ (d2 - d1) + '毫秒'); } fn();

innerHTML第二种方式:

// innerHTML数组方式
function fn() {
     
            var d1 = +new Date();
            var arr = [];
            for (var i = 0; i < 1000; i++) {
     
                // 往数组里面添盒子
                arr.push('
'
); } // 把数组转换成字符串 document.body.innerHTML = arr.join(''); var d2 = +new Date(); console.log('innerHTML数组方式耗时:' + (d2 - d1) + '毫秒'); } fn();

createElement的方式:

//createElemen创建元素方式
function fn() {
     
            var d1 = +new Date();
            var str = '';
            for (var i = 0; i < 1000; i++) {
     
                // 创建新的元素再放到body里面去
                var div = document.createElement('div');
                div.style.width = '10px';
                div.style.height = '10px';
                div.style.border = '1px solid red';
                document.body.appendChild(div);
            }
            var d2 = +new Date();
            console.log('createElemen创建元素方式耗时:' + (d2 - d1) + '毫秒');
        }
        fn();

2.分析:

各对应运行结果:
JS学习笔记之三种动态创建元素区别_第2张图片

JS学习笔记之三种动态创建元素区别_第3张图片

JS学习笔记之三种动态创建元素区别_第4张图片

innerHTML是将内容写入某个DOM节点,不会导致页面的重绘。
我们可以通过运行结果看到,innerHTML创建多个元素效率要更高一些,当然采用的是数组拼接方式而不
是字符串拼接方式,结构相应也复杂一些。而采用createElement的方式创建多个元素效率稍微低一点
但是结构比较清晰明了。

总结

以上就是今天要跟大家分享的三种动态创建元素区别的内容,并且书名不同浏览器下,innerHTML的效率要比creatElement高。

你可能感兴趣的:(JS学习笔记,js,javascript)