首页 > 代码库 > jQuery创建DOM节点

jQuery创建DOM节点

1、创建元素节点

  $(html)方法会根据传入的html标记字符串,创建一个DOM元素,并将这个DOM换成jquery对象返回。
      动态添加的新元素节点不会被自动添加到文档中。
      当创建单个元素时,要注意闭合标签和使用标准的xhtml格式。比如 $("<p></p>")   $("<p/>")。

2、创建文本节点

  在创建元素节点的时候直接把文本内容写进去$("<p>append内容</p>")。

3、创建属性节点

  创建属性节点与创建文本节点类似。

 

既然有创建节点那么就需要操作节点,整理了一下常用到的:插入节点、删除节点、复制节点、替换节点、包裹节点

  jQuery插入节点

  1、append()  向每个匹配的元素插入内容

  2、appendTo()  将内容追加到指定的元素中  颠倒了append操作

  3、prepend()   向每个匹配元素前置插入内容

  4、prependTo()  将内容前置到指定元素中

  5、after()  在每个匹配的元素后插入内容

  6、insertAfter()  将内容追加到指定的元素后

  7、before()   在每个匹配的元素前插入内容

  8、insertBefore()  将内容追加到指定的元素前

  jQuery删除节点

  1、remove()方法:从DOM中删除所有匹配的元素。这个方法返回的值是一个指向被删除节点的引用。

  2、detach()方法:从DOM中删除所有匹配的元素。不同于remove()方法的是:detach()方法能保留所有绑定的事件。

    3、empty()方法:清空节点里的内容。

  复制节点

   1、clone()方法:生成被选元素的副本,包含子节点、属性和文本。

  替换节点

  1、replaceWith()  将所有匹配的元素替换成指定的xhtml或DOM元素。

  2、replaceAll()  将指定的xhtml或DOM元素替换到匹配的元素。

  包裹节点

  1、wrap()  将某个节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义。

  2、wrapAll()  将所有匹配的元素用一个元素包裹起来    注:如果被包裹的多个元素之间有其它元素,其它元素会被放到包裹元素之后。

  3、wrapInner()  将匹配的元素的子内容用其它标记包裹起来。

 

 

  

 

jQuery创建DOM节点