当前位置：首页 > jquery

jquery创建div

2026-03-16 19:28:07jquery

使用jQuery创建div元素

在jQuery中创建div元素有多种方法，以下是几种常见的实现方式：

方法一：使用$()函数直接创建

var newDiv = $('<div></div>');
$('body').append(newDiv);

方法二：添加属性和内容

jquery创建div

$('<div>', {
    id: 'myDiv',
    class: 'container',
    text: '这是新创建的div',
    css: {
        'background-color': '#f0f0f0',
        'padding': '10px'
    }
}).appendTo('body');

方法三：链式操作

$('<div>')
    .addClass('box')
    .attr('id', 'contentBox')
    .html('<p>动态添加的内容</p>')
    .appendTo('#container');

方法四：批量创建

jquery创建div

for (var i = 0; i < 5; i++) {
    $('<div>')
        .addClass('item')
        .text('项目 ' + (i + 1))
        .appendTo('#listContainer');
}

注意事项

创建div后通常需要将其插入到DOM中才能显示，常用的插入方法有：

append() 插入到指定元素内部的末尾
prepend() 插入到指定元素内部的开头
after() 插入到指定元素之后
before() 插入到指定元素之前
appendTo() 将元素追加到指定目标

可以通过链式调用一次性设置多个属性：

$('<div>').addClass('panel').attr('data-role', 'widget').css({'width': '200px', 'height': '150px'});

性能优化建议

当需要创建大量元素时，建议使用文档片段(document fragment)来提高性能：

var fragment = $(document.createDocumentFragment());
for (var i = 0; i < 100; i++) {
    fragment.append($('<div>').addClass('cell').text(i));
}
$('#grid').append(fragment);