从零开始学jQuery(5)--修改DOM结构

添加DOM
要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script> 
</head>
<body>
<div id="test-div">
 <ul>
<li><span>DOTA2</span></li>
 <li><span>CSGO</span></li>
 <li><span>LOL</span></li> 
</ul> 
</div>
</body>
</html>

 var ul = $('#test-div>ul'); //拿到了我们节点
 ul.append('<li><span>王者荣耀</span></li>');//添加一个王者荣耀的节点，发现页面上多了个王者荣耀
 ul.append('吃鸡');//额这样也行...就干加了个吃鸡...哈哈

append()还可以传入原始的DOM对象，jQuery对象和函数对象

var  new_li= document.createElement('li');//创建一个新的dom对象
new_li.innerHTML = '<span>星际争霸</span>';//给这个li里面添加内容
ul.append(new_li);//添加了这个新的li对象
ul.append($('#scheme'));//添加jQuery对象，但不知道有什么效果....我的测试没啥效果
ul.append(function ( ) { return '<li><span>红警' + '</span></li>'; });

传入函数时，要求返回一个字符串、DOM对象或者jQuery对象。因为jQuery的append()可能作用于一组DOM节点，只有传入函数才能针对每个DOM生成不同的子节点
append()把DOM添加到最后，prepend()则把DOM添加到最前
如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点

插入到指定位置
同级节点可以用after()或者before()方法
比如说我们想添加到DOTA2和CSGO之间，可以先定位到DOTA2，然后用after()方法

var dota2 = $('#test-div>ul>li:first-child');//拿到dota2
dota2.after('<li><span>cs1.6</span></li>');//再dota2后面添加cs1.6

删除节点
要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了,如果jQuery对象包含若干DOM节点，实际上可以一次删除多个DOM节点

dota2.remove();//只删除DOTA2
 $('#test-div>ul>li').remove(); //全都删了..变成空白页啦

从零开始学jQuery(5)--修改DOM结构

猜你喜欢