jquery创建节点

jQuery 创建节点的方法

在 jQuery 中，可以通过多种方式动态创建 DOM 节点。以下是几种常见的方法：

使用 $() 函数创建新元素

通过传递 HTML 字符串给 $() 函数，可以创建新的 DOM 元素。例如创建一个新的 <div> 元素：

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

添加属性和内容

创建元素时可以同时设置属性和内容：

var newLink = $('<a>', {
    href: 'https://example.com',
    text: 'Click me',
    class: 'btn'
});

使用 append() 或 prepend() 插入节点

将创建的元素插入到现有 DOM 中：

$('body').append(newDiv); // 添加到 body 末尾
$('body').prepend(newLink); // 添加到 body 开头

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

动态设置元素的内容：

$('#container').html('<p>New content</p>'); // 替换内容
$('#container').text('Plain text content'); // 设置纯文本

使用 clone() 复制现有节点

复制已有的 DOM 节点：

var clonedElement = $('#original').clone();
$('#target').append(clonedElement);

使用 after() 或 before() 插入同级节点

在指定元素的前后插入新节点：

$('#existing').after('<span>After</span>');
$('#existing').before('<span>Before</span>');

使用 wrap() 包裹元素

用新创建的元素包裹现有元素：

$('#inner').wrap('<div class="wrapper"></div>');

通过以上方法，可以灵活地动态创建和操作 DOM 节点。