当前位置：首页 > jquery

jquery添加div

2026-03-02 17:54:36jquery

使用 jQuery 添加 div 元素

通过 jQuery 可以动态地向 DOM 中添加新的 div 元素。以下是几种常见的方法：

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

// 在指定元素内部末尾添加 div
$('#container').append('<div class="new-div">新添加的 div</div>');

// 在指定元素内部开头添加 div
$('#container').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() 或 appendTo()

// 替换或设置元素内部的 HTML
$('#container').html('<div class="new-div">新添加的 div</div>');

// 将创建的 div 追加到指定元素
$('<div class="new-div">新添加的 div</div>').appendTo('#container');

方法四：动态创建元素并设置属性

jquery添加div

// 创建 div 元素并设置属性和内容
var newDiv = $('<div>', {
    class: 'new-div',
    text: '动态创建的 div',
    css: {
        color: 'red',
        padding: '10px'
    }
});

// 添加到 DOM 中
$('#container').append(newDiv);

注意事项

确保在 DOM 完全加载后再执行 jQuery 操作，可以将代码放在 $(document).ready() 中：
```
$(document).ready(function() {
    // 添加 div 的代码
});
```
使用 class 或 id 选择器时，确保目标元素存在于 DOM 中。

以上方法可以根据具体需求选择，灵活应用于各种场景。