jquery创建元素
jQuery 创建元素的方法
使用 jQuery 创建新元素有多种方式，可以根据需求选择不同的方法。
使用 $() 创建元素
通过将 HTML 字符串传递给 jQuery 函数 $() 可以直接创建新元素：
var newElement = $('<div>这是一个新创建的 div 元素</div>');使用 append() 或 prepend() 添加元素
创建元素后，可以将其添加到 DOM 中：
$('body').append(newElement); // 添加到 body 末尾
$('body').prepend(newElement); // 添加到 body 开头使用 html() 或 text() 设置内容
创建空元素后，可以使用 html() 或 text() 方法设置内容：
var emptyDiv = $('<div></div>');
emptyDiv.html('<p>使用 html() 方法添加的内容</p>');
emptyDiv.text('使用 text() 方法添加的纯文本');使用 clone() 复制现有元素
可以复制现有的 DOM 元素：
var clonedElement = $('#existing-element').clone();
$('body').append(clonedElement);使用 after() 或 before() 插入元素
在指定元素的前后插入新元素：
$('#target-element').after(newElement); // 在目标元素后插入
$('#target-element').before(newElement); // 在目标元素前插入添加属性和样式
创建元素时可以同时添加属性和样式：
var styledElement = $('<div>', {
id: 'new-div',
class: 'highlight',
css: {
'color': 'red',
'font-weight': 'bold'
}
});使用文档片段创建多个元素
对于需要创建多个元素的情况，可以使用文档片段提高性能：
var fragment = $('<div></div>');
for (var i = 0; i < 10; i++) {
fragment.append($('<p>段落 ' + i + '</p>'));
}
$('body').append(fragment);注意事项
- 创建的元素在添加到 DOM 前不会显示在页面上
- 使用
html()方法会解析 HTML 标签，而text()方法会将内容作为纯文本处理 - 频繁操作 DOM 会影响性能，建议批量操作或使用文档片段
