介绍
为了总结几种新建并插入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代码了。
三种方法
- 原生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)
}- 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)
}- 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测试通过
