jQuery节点操作

添加节点

• append与appendTo为向元素的最后添加节点的方法。区别是，append方法由添加的元素所调用，参数为添加的内容；而appendTo方法由添加的内容所调用，参数为要添加的元素

        const $li = $("<li>新增li节点</li>")
        $("ul").append($li)
        $li.appendTo("ul")

• prepend与prependTo也为添加节点的方法， 但是这两个方法是想元素的首部添加节点，使用方法与append和appendTo相同

        const $li = $("<li>新增li节点</li>")
        $("ul").prepend($li)
        $li.prependTo("ul")

删除节点

• remove方法是删除节点的一个方法，他有一个参数，可以传入也可以不传入。当传入时，remove在删除节点时，只会删除含有这些属性的节点

        $("div").remove()
        $("li").remove(".class")

• empty方法为清空元素内所有的内容，而元素本身的标签不会被删除

        $("li").empty()

• detach方法与remove方法的作用以及使用方法一致

        $("div").detach()

替换节点

• 使用replaceWith与replaceAll来进行替换节点，其中replaceWith被要替换的元素所调用，参数为替换的内容，而replaceAll刚好相反

        const $h1 = $("<h1>替换后的内容</h1>")
        $("p").replaceWith($h1)
        $h1.replaceAll("p")

复制节点

• 复制节点可以使用clone方法，clone方法的参数为布尔型，值为true或者false
• 当传入false时，代表复制节点为浅复制，只能复制该标签，与标签有关的操作无法复制；当传入true时，代表深复制，既可以复制标签内容，也可以复制相关的操作，例如点击事件等

      $("button").eq(0).click(function () {
        const $li = $("li:first").clone(false)
        $("ul").append($li)
      })
      $("button").eq(1).click(function () {
        const $li = $("li:first").clone(true)
        $("ul").append($li)
      })