如何在 jQuery 中向 DOM 添加新元素
答案:使用jQuery append() 或prepend() 方法
您可以使用 jQuery append() 或 prepend() 方法向 DOM 添加或插入元素。 jQuery append() 方法将内容插入到匹配元素的末尾，而 prepend() 方法将内容插入到匹配元素的开头。
以下示例将向您展示如何使用 jQuery append() 方法轻松地将新项目添加到 HTML 有序列表 的末尾。 让我们尝试一下，看看它是如何工作的:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 添加元素到 DOM</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ol").append("<li>list item</li>");
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</body>
</html>同样，您可以在匹配元素的开头添加元素。
以下示例将演示如何使用 jQuery prepend() 方法在段落元素的开头添加 HTML 标题。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 添加元素到 DOM</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").prepend("<h1>这是一个标题</h1>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>Add heading</button>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
