在下面的代码里整理了jquery的节点操作方法，
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.min.js"></script>
<title></title>
</head>
<body>
<h1 id="b">操作节点</h1>
<ul>
<li>列表项0</li>
<li id="a">列表项1</li>
<li>列表项2</li>
<li id="c">列表项3</li>
<li id="d">列表项4</li>
<li>列表项5</li>
</ul>
<script>
//插入和替换元素
//1
$('#a').append('在内容结尾处添加文本');
$('li')[1].prepend('&'); //在列表2的头部添加&
$('li')[1].before('<li>new</li>') //无法在列表项的前面添加一个新的列表，避免使用jquery中转js原生对象的方法
$('#c').before('<li>new</li>');//在列表3的前面添加一个新的列表
$('#c').after('<li>after</li>');//在列表3的后面添加一个新的列表
$('#d').replaceWith('<hr/>');//将li元素替换为水平线
//2
$('<hr/>').appendTo('#b');//添加到h1中
$(document.createTextNode('&')).prependTo('h1')//h1头部添加&(文本节点)
$('hr').insertAfter('h1'); //inserBefore()同样操作方法，
$('<li>替代</li>').replaceAll('hr') //将水平线都替代为列表
//总结以上两种方法在对不同节点操作时，会出现一些失误，所以在使用这方法时，记得查看页面是否与自己想要的情况一致。
// 以下是另外的操作方法
//1
var Li = $('<li>');
Li.html('我是该方法创建的'); //首先创建出该列表
Li.attr('id', 'ID'); //设置属性id=item2
Li.appendTo('ul'); //到这里就能在网页显示你添加的列表项了
Li.prepend('w');//在该列表里头部加入w字符，当然你也可以加入子标签比如<span></span>,<hr/>
//Li.append()等同于上述prepend（）只不过它是后置内容
Li.after('<p>在列表后部添加标签</p>')
/*after（）和before（）能够添加后置内容和前置内容，区别prepend（）和append()的是
添加的内容并不是该列表的子标签，是兄弟标签*/
//2
var Li2 = $('<li>这样也是可行的，可以省略Li2.html的步骤</li>');
</script>
</body>
</html>拓展：复制元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<a href="#">链接一</a>
<a href="#">链接二</a>
<a href="#">链接三</a>
<script>
//在文档结尾创建一个空div
$(document.body).append('<div id="linkList" style="border: 1px solid black"></div>')
//将文档中的所有链接复制并插入该新div
$('a').clone().appendTo('#linkList');
//在每一个a标签后面添加换行标签
$('#linkList>a').append('<br/>')
//包装元素
//将div里的链接一包装在<span>里
$('div>a:first').wrap('<span style="background-color: #00CC66"></span>')
//删除元素
// 未完待续
</script>
</body>
</html>拓展2：删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<a href="#">链接一</a>
<a href="#">链接二</a>
<a href="#">链接三</a>
<script>
//在文档结尾创建一个空div
$(document.body).append('<div id="linkList" style="border: 1px solid black"></div>')
//将文档中的所有链接复制并插入该新div
$('a').clone().appendTo('#linkList');
//在每一个a标签后面添加换行标签
$('#linkList>a').append('<br/>')
//包装元素
//将div里的链接一包装在<span>里
$('div>a:first').wrap('<span style="background-color: #00CC66">我是span</span>')
//删除元素
$('div>a:first').remove()
//remove() 方法会从文档中移除选中元素以及元素的内容,
//empty():方法会删除每个选中的元素的所有子节点（包括文本节点），但不会修改元素自身
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
