常见用法——js中如何动态生成元素的几种方法总结（简单直观！）

本文链接：https://blog.csdn.net/weixin_42897762/article/details/105814911

我们一般在渲染页面时会根据给定的数据来动态的渲染页面。在学习完原生js以及jQuery后，总结如下几种动态生成元素的方法。

接下来我会直接用实例来总结方法！相关知识点可查阅文档。

1.首先是利用原生js的节点操作
一般我们可以利用原生js的节点操作使用createElement()方法来创建元素（节点），然后利用innerHTML属性来设置元素的内容，最后使用appendChild()方法来添加元素（节点）。

appendChild()方法：将元素添加到父元素里面的最后面
insertBefore(生成的元素，指定元素）:将动态生成的元素插入到指定元素的前面

栗子：
在这里插入图片描述

使用字符串的形式（更简单）
我们可以直接使用字符串的形式，把标签里面的内容顺便写好。这样就不需要使用innerHTML属性了！最后利用insertAdjacentHTML()方法来追加给父元素。

栗子：

var li='<li>123</li>';
ul.insertAdjacentHTML(beforeend , li);

使用说明：
在这里插入图片描述

使用jQuery实现
1）.生成元素

2）添加元素（分：外部添加和内部添加）
内部添加：append() 和prepend（）
前一个放到父元素里面的最后面，后一个是放到父元素里面的最前面

外部添加：

栗子：

// 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
            // 2. 添加元素
            //1) 内部添加
            // $("ul").append(li); // 内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面

最后用一个实例来体现一下：
在这里插入图片描述
功能：实现动态生成表格数据

html部分：
<div class="tb">
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>产品名称</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody>
                   //里面的内容通过动态生成            
              	</tbody>
            </table>
        </div>

<scirpt>
// 用数组对象的形式存储数据
    var data = [{
        id: 1,
        pname: '小米',
        price: 3999
    }, {
        id: 2,
        pname: 'oppo',
        price: 999
    }, {
        id: 3,
        pname: '荣耀',
        price: 1299
    }, {
        id: 4,
        pname: '华为',
        price: 1999
    }];

    // 获取元素
    var tbody = this.document.querySelector('.tb tbody');
	// 1.利用forEach方法遍历数据渲染页面（初始化页面）
    // data.forEach()或用jQuery的$.each()方法遍历数组
    // 这里的value指的是数组中每一项（对象），index指的是索引号。第三个参数是数组本身（可省略）
    data.forEach(function (value, index) {
		//方法1：利用字符串形式       
        // var tr = '<tr><td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td></tr>'
        // tbody.insertAdjacentHTML('beforeend', tr);

        // 方法2：利用原生js的节点操作动态生成元素的方法
        // var tr = document.createElement('tr');
        // tr.innerHTML = '<tr><td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td></tr>'
        // tbody.appendChild(tr);

        // 方法3：用jQuery实现	（记得引入jQuery文件)
        var tr = $('<tr><td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td></tr>');
        $('.tb tbody').append(tr);
        // 或者直接这样写：
        // $('.tb tbody').append('<tr><td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td></tr>');
    })
</scirpt>