在jQuery中，添加新元素到DOM（文档对象模型）中通常使用几种不同的方法，这些方法让能够将HTML内容、文本、jQuery对象或DOM元素插入到页面上的指定位置。以下是一些常用的方法：

1. .append() 和 .appendTo()

  • .append(content)：向每个匹配的元素内部追加内容。
  • .appendTo(target)：将所有匹配的元素追加到指定的目标元素内部。
// 使用 .append()
$("#someDiv").append("<p>这是一个新的段落。</p>");

// 使用 .appendTo()
$("<p>这是另一个新的段落。</p>").appendTo("#someDiv");

2. .prepend() 和 .prependTo()

  • .prepend(content)：向每个匹配的元素内部前置内容。
  • .prependTo(target)：将所有匹配的元素前置到指定的目标元素内部。
// 使用 .prepend()
$("#someDiv").prepend("<p>这是前置的段落。</p>");

// 使用 .prependTo()
$("<p>这也是前置的段落。</p>").prependTo("#someDiv");

3. .before() 和 .insertBefore()

  • .before(content)：在每个匹配的元素之前插入内容。
  • .insertBefore(target)：将所有匹配的元素插入到指定的目标元素之前。
// 使用 .before()
$("#someDiv").before("<p>这是#someDiv之前的段落。</p>");

// 使用 .insertBefore()
$("<p>这是另一个#someDiv之前的段落。</p>").insertBefore("#someDiv");

4. .after() 和 .insertAfter()

  • .after(content)：在每个匹配的元素之后插入内容。
  • .insertAfter(target)：将所有匹配的元素插入到指定的目标元素之后。
// 使用 .after()
$("#someDiv").after("<p>这是#someDiv之后的段落。</p>");

// 使用 .insertAfter()
$("<p>这是另一个#someDiv之后的段落。</p>").insertAfter("#someDiv");

5.如果想获取页面上所有的标签（即所有的DOM元素）

可以使用通配符选择器*。这个选择器会匹配所有的元素。以下是如何使用jQuery来实现这一点的示例：

$(document).ready(function(){
    // 使用 "*" 选择器来获取页面上所有的元素
    $('*').each(function(){
        // 在这里，可以对每一个元素进行操作
        // 例如，打印出每个元素的标签名
        console.log(this.tagName);
    });
});

在这个例子中，$('*')会选中页面上的所有元素，然后通过.each()方法遍历这些元素。在.each()方法的回调函数中，this关键字指向当前正在遍历的元素。通过this.tagName，可以获取到当前元素的标签名（例如"DIV"、"SPAN"等）。

请注意，使用$('*')选择页面上所有的元素可能会影响性能，特别是在大型或复杂的页面上，因为它需要遍历DOM树中的每一个节点。如果只需要对特定类型的元素进行操作，那么使用更具体的选择器（如$('div')来选中所有的<div>元素）会是更高效的做法。

注意事项

  • 这些方法中的content参数可以是HTML字符串、DOM元素、jQuery对象或文本。
  • 当使用这些方法时，jQuery会自动处理跨浏览器兼容性问题，让能够更专注于应用逻辑。
  • 在插入大量DOM元素时，考虑使用文档片段（documentFragment）来提高性能，尽管jQuery内部已经做了很多优化，但在极端情况下手动管理文档片段可能会更有效。

jQuery常用功能_jQuery