当前位置：首页 > jquery

jquery添加div

2026-02-03 09:52:51jquery

使用jQuery添加div元素

在jQuery中，可以通过多种方法动态添加div元素到DOM中。以下是几种常见的方式：

方法一：使用append()或prepend()

// 在body末尾添加div
$('body').append('<div class="new-div">新添加的div</div>');

// 在body开头添加div
$('body').prepend('<div class="new-div">新添加的div</div>');

方法二：使用after()或before()

// 在某个元素后添加div
$('#target-element').after('<div class="new-div">新添加的div</div>');

// 在某个元素前添加div
$('#target-element').before('<div class="new-div">新添加的div</div>');

方法三：使用html()或text()

// 替换元素内容为新的div
$('#target-element').html('<div class="new-div">替换内容</div>');

// 添加纯文本内容（不会解析HTML标签）
$('#target-element').text('<div>这段文本不会被解析为HTML</div>');

方法四：创建jQuery对象后插入

// 创建div元素对象
var newDiv = $('<div/>', {
    class: 'new-div',
    text: '通过对象创建的div'
});

// 插入到目标元素中
$('#target-element').append(newDiv);

方法五：使用insertAfter()或insertBefore()

jquery添加div

// 创建div并插入到目标元素后
$('<div class="new-div">新div</div>').insertAfter('#target-element');

// 创建div并插入到目标元素前
$('<div class="new-div">新div</div>').insertBefore('#target-element');

注意事项

确保DOM加载完成后再执行jQuery操作，可以将代码放在$(document).ready()中
动态添加的元素如果需要事件绑定，建议使用事件委托
大量添加元素时考虑性能优化

示例：完整HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>jQuery添加div示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="container"></div>

    <script>
        $(document).ready(function() {
            // 添加多个div示例
            for(var i=0; i<5; i++) {
                $('#container').append(
                    $('<div/>', {
                        class: 'item',
                        text: '项目 ' + (i+1)
                    })
                );
            }
        });
    </script>
</body>
</html>

这些方法可以根据具体需求选择使用，都能有效地在页面中添加新的div元素。