JQuery学习14篇(删除dom节点和增加节点)

最新推荐文章于 2020-11-18 20:11:43 发布

原创最新推荐文章于 2020-11-18 20:11:43 发布 · 219 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了使用JQuery进行DOM节点的删除与增加操作的方法，包括清空节点内容、删除节点、在不同位置插入新节点等实用技巧，适用于前端开发者快速掌握JQuery的基本操作。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习14篇(删除dom节点和增加节点)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习14篇(删除dom节点和增加节点)</h3>
	<input type ="button" value="清空ul" onclick="cleanUlNode();"/><br/><br/>
	<input type ="button" value="删除ul" onclick="deleteUlNode();"/><br/><br/>
	<input type ="button" value="增加li" onclick="addLiNode();"/><br/><br/>
	<input type ="button" value="增加节点" onclick="add_Node();"/><br/><br/>
	<ul>
		<li>赣南脐橙</li>
		<li>柿子饼</li>
		<li>酸萝卜</li>
		<li onclick="alert('当')">
			珍珠粉
		</li>
	</ul>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function cleanUlNode()
{
	//将ul节点中的内容清空掉
	$('ul').empty();
}

function deleteUlNode()
{
	//删除ul节点
	$('ul').remove();
}

function addLiNode(){
 $('<li>番薯干</li>').appendTo($('ul'));//默认追加在最后面
 $('ul').append('<li>肉皮</li>');//默认追加在最后面
 $('ul').prepend('<li>酸枣糕</li>');//追加在最前面
 //追加在ul后面，与ul是平级(即兄弟关系)
 $('ul').after($('<ol><li>高山青草奶</li><li>擂茶</li></ol>'));
//追加在ul前面，与ul是平级(即兄弟关系)
 $('ul').before($('<ol><li>盘古茶</li><li>峡山道菜</li></ol>'));
}

function add_Node(){
	$('ul').after($('<ol><li>江西省赣州市于都县</li></ol>'));
	$('ol').append($('ul li:last'));
}
</script>
</html>

标签