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

最新推荐文章于 2024-07-19 12:58:53 发布

azraelxuemo

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量187

点赞数 2

分类专栏： # jQuery学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/azraelxuemo/article/details/106737332

版权

jQuery学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

添加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(); //全都删了..变成空白页啦

azraelxuemo

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零开始学jQuery(5)--修改DOM结构

修改DOM结构添加DOM要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法，例如： JavaScript Python Swift 如何向列表新增一个语言？首先要拿到节点： var ul = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲test-div>ul'); …(’#scheme’)); // 添加函数对象: ul.append(function (inde
复制链接

扫一扫