jquery创建节点

jQuery 创建节点的方法

jQuery 提供了多种方法来动态创建 DOM 节点，以下是几种常见的方式：

使用 $() 直接创建元素

通过将 HTML 字符串传递给 jQuery 函数 $() 可以创建新的 DOM 元素：

var newDiv = $('<div>这是一个新的 div 元素</div>');

使用 .append() 或 .appendTo() 插入节点

创建节点后，可以将其插入到现有 DOM 结构中：

$('body').append(newDiv); // 将 newDiv 添加到 body 的末尾
newDiv.appendTo('body');  // 同上，语法不同

使用 .html() 或 .text() 设置内容

可以通过这些方法动态设置元素内容：

$('<div>').text('纯文本内容'); // 创建带有文本的 div
$('<div>').html('<strong>加粗文本</strong>'); // 创建带 HTML 的 div

使用 .clone() 复制现有节点

复制已有的 DOM 节点：

var clonedDiv = $('#existingDiv').clone(); // 深度复制整个节点

创建带属性的元素

可以在创建元素时直接添加属性：

var link = $('<a>', {
    href: 'https://example.com',
    text: '点击访问',
    class: 'external-link',
    target: '_blank'
});

创建复杂节点结构

通过链式调用可以创建嵌套的节点结构：

var list = $('<ul>').append(
    $('<li>').text('项目1'),
    $('<li>').text('项目2'),
    $('<li>').text('项目3')
);

注意事项

• 创建的元素不会自动添加到 DOM 中，需要显式插入
• 使用 .text() 方法可避免 XSS 攻击，而 .html() 需谨慎使用
• 对于大量节点操作，考虑文档片段(documentFragment)提高性能