首页 > 代码库 > 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节点