前端提高篇：jQuery的DOM操作：插入操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM 插入操作示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="content">
<p>第一个段落</p>
</div>
<script>
// 在id为content的元素内部的末尾插入一个新的段落
$("#content").append("<p>新增的段落</p>");
// 在id为content的元素内部的开头插入一个新的段落
$("#content").prepend("<p>新增的开头段落</p>");
// 在指定段落之后插入一个新的段落
$("p:first").after("<p>插入的后段落</p>");
// 在指定段落之前插入一个新的段落
$("p:first").before("<p>插入的前段落</p>");
</script>
</body>
</html>这个示例代码展示了如何使用jQuery的append(), prepend(), after(), 和 before() 方法来在现有元素的内容之前、之后、开头和末尾插入新的HTML内容。
评论已关闭