一:创建元素节点(添加)

创建元素节点并且把节点作为元素的子节点添加到DOM树上

append(): 在元素下添加元素
用法:$("id").append("定义的节点"); 例如:var li1 = $("<li>橘子</li>");
添加属性节点:var li3 = $("<li class='test'>草莓</li>")

appendTo(): 将元素添加到元素里面
用法: $(li3).appendTo("#box1");

prepend(): 添加节点到元素的最上面

prependTo():将节点添加给指定元素的最上面
用法:$(li3).prependTo("#box1");

before():将节点添加到指定元素的前面(外层)
用法: $("#div1").before(div1);

insertBefore():将新建元素添加到目标节点前面左右目标元素的兄弟元素

after():将节点添加到指定元素的后面(外层)
用法: $("#div1").after(div1);

insertAfer(): 将新建的元素添加到目标节点后面作为兄弟元素
用法:$(element).insertAfter("目标节点")

二:删除节点

remove(): 删除所有匹配到的元素,这个方法能够删除元素的所有子节点
$(element).remove();

empty(): empty原则上来讲它并不是删除元素,它只是清空节点,它能清空指定元素的所有子节点

$(element).empty();

三:修改节点(替换节点,包裹节点,复制节点)

包裹节点:wrap()
用法:$(element).wrap("html")

复制节点:clone(true) 完全复制某一个元素 :true复制元素的同时也复制它的行为,如果不需要复制行为的时候就不加参数
用法:$(element).clone(true);

四:属性操作和样式操作

attr() : 用来获取样式和设置样式和属性
removeAttr() : 用来删除元素样式和属性

addClass() :追加样式
removeClass :移除样式
toggleClass : 切换样式
hasClass :判断是否含有某个样式

五:设置和获取HTML 文本和值

html() :获取元素中html内容
text() :获取元素中文本
val() :获取元素中的值,类似于JavaScript中的value属性

children() :用于取得匹配元素中的子元素集合。
next() :用于取得匹配元素后面紧跟的兄弟元素
prev() :用于取得匹配元素前面紧邻的兄弟元素
siblings() :用于取得匹配元素所有的兄弟元素

...

 

修改节点
修改文档中的元素节点可以使用多种方法:复制节点、替换节点、包裹节点

复制节点:
$(element).clone()
复制节点方法能够复制节点元素,并且能够根据参数决定是否复制节点元素的行为。
例:$("ul li:eq(0)").clone(true);
替换节点:
$(被替换的元素).repalcewith(创建的节点)
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM 元素。        
$(创建的节点).repalceAll(被替换的元素)
replaceAll()方法与replaceWith()方法的作用相同,只是颠倒了replaceWith()操作 
包裹节点:
$(element).wrap()
$(element).wrapAll()
$(element).wrapInner()
 包裹节点方法使用其他标记包裹目标元素从而改变元素的显示形式等,并且该操作不会破坏原始文档的词义。
包裹节点有三种实现形式:wrap()     wrapAll()     wrapInner()
         (1)wrap()方法如下:$(dstelement).wrap(tag);

例:
            $("p").wrap("<b></b>");该示例方法使用b标签包裹所有的p元素每个元素都使用b标签包裹。
         (2)wrapAll()方法如下:$(dstelement).wrapAll(tag);

例:
            $("p").wrapAll("<b></b>");访示例方法使用b标签包裹所有的p元素,所有的p元素标签用一个b标签包裹。
         (3)wrapInner()方法如下:$(dstelement).wrapInner(tag);

例:
            $("strong").wrapInner("<b></b>");该示例使用b标签包裹每个一strong元素的子元素。
————————————————
版权声明:本文为CSDN博主「cc小马哥」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_41298721/article/details/87894920