如何在 jQuery 中创建一个 DIV 元素
答案:使用jQuery append()
方法
您可以简单地使用 append()
方法在 jQuery 中在所选元素的末尾动态创建一个元素,例如
。 同样,您可以使用 <div>
prepend()
在开头创建或插入元素。 看看下面的例子,看看它是如何工作的:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用 jQuery 创建 HTML 元素</title>
<style>
.container{
padding: 20px;
background: #f2f2f2;
border: 5px solid #aaa;
}
.content{
padding: 10px;
border: 3px solid orange;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
/* 单击按钮插入元素 */
$("button").click(function(){
/* 最后创建一个 div 元素 */
$(".container").append('<div class="content">Appended DIV</div>');
/* 在开始时创建一个 div 元素 */
$(".container").prepend('<div class="content">Prepended DIV</div>');
});
});
</script>
</head>
<body>
<div class="container">
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p><button type="button">Insert DIV</button></p>
</div>
</body>
</html>
jQuery 还提供了方法,如 before()
和 after()
来在所选元素之前或之后创建元素。 请参阅 jQuery 插入内容
上的教程以了解更多信息。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答: