WEB 教程
实践 示例
HTML 参考手册
CSS 参考手册
PHP 参考手册

如何在 jQuery 中创建一个 DIV 元素

主题:JavaScript / jQuery上一页|下一页

答案:使用jQuery append()方法

您可以简单地使用 append() 方法在 jQuery 中在所选元素的末尾动态创建一个元素,例如 <div>。 同样,您可以使用 prepend() 在开头创建或插入元素。 看看下面的例子,看看它是如何工作的:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create HTML Elements Using jQuery</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 相关问题解答

以下是与此主题相关的更多常见问题解答:

Advertisements