js创建新元素的几种方式

楚天乐 201 0 条

介绍

为了总结几种新建并插入dom元素到页面某部分的的方式,我们先搭建如下html结构。新建一个html文件,写入如下代码用chrome打开即可。

<!doctype html>
<html lang="zh">
<head>
    <title>测试页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<div class="dropdown-menu" id="attributes_list"></div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
</body>
</html>

有了这个html页面,我们就可以去chrome的debug console测试我们的js代码了。

三种方法

  1. 原生js的document.createElement方法
let ob = null
ob = document.createElement("a")
ob.setAttribute("href", "#")
ob.innerText = "xxx"
$('#attributes_list').append(ob)

ob = document.createElement("a")
ob.setAttribute("href", "#")
ob.innerText = "xxx"
$('#attributes_list').append(ob)

测试代码如下:

{
    $('#attributes_list').html("")

    // 初始0个
    console.log($('#attributes_list > a').length)

    // 添加1个
    let newlink = null
    newlink = document.createElement("a")
    newlink.setAttribute("href", "#")
    newlink.setAttribute("class", "dropdown-item")
    newlink.innerText = "xxx"
    $('#attributes_list').append(newlink)

    // 添加1个
    newlink = document.createElement("a")
    newlink.setAttribute("href", "#")
    newlink.setAttribute("class", "dropdown-item")
    newlink.innerText = "xxx"
    $('#attributes_list').append(newlink)

    // 结束2个
    console.log($('#attributes_list > a').length)
}
  1. jquery append添加html代码
$('#attributes_list').append("<a href='#'>xxxx</a>")
$('#attributes_list').append("<a href='#'>yyy</a>")

测试代码:

{
    $('#attributes_list').html("")

    // 初始0个
    console.log($('#attributes_list > a').length)

    // 添加1个
    $('#attributes_list').append("<a href='#'>xxx</a>")

    // 添加1个
    $('#attributes_list').append("<a href='#'>yyy</a>")

    // 结束2个
    console.log($('#attributes_list > a').length)
}
  1. jquery append添加dom对象
$('#attributes_list').append($('<a>', {class: "dropdown-item", text:"zzzzz"}))
$('#attributes_list').append($('<a>', {class: "dropdown-item", text:"yyy"}))

测试代码:

{
    $('#attributes_list').html("")

    // 初始0个
    console.log($('#attributes_list > a').length)

    // 添加1个
    $('#attributes_list').append($('<a>', {class: "dropdown-item", text:"xxx"}))

    // 添加1个
    $('#attributes_list').append($('<a>', {class: "dropdown-item", text:"yyy"}))

    // 结束2个
    console.log($('#attributes_list > a').length)
}

文中所有测试代码都由我自己编写,并在chrome debug console测试通过



发表我的评论
'
昵称 (必填)
邮箱 (必填)
网址