用jQuery实现简单的DOM操作

Posted 2020-09-22 IT-忐忑

通过jQuery创建元素节点：$oLi = $("<li></li>");这样我们就创建了一个li标签

如果想在元素节点中添加文本的话也挺简单：$oLi = $("<li>文本</li>");这样就可以在元素节点中添加文本了；

当然如果你要写一个动态的文本也可以：$oLi = $("<li>"+index+"</li>");这样子，只要把你所获得的文本赋给变量index就行了；

如果要写一些有属性，类名，id名的元素节点也挺简单：$oLi = $("<li title=‘title‘ class=‘li‘ id=‘lI‘></li>);在添加属性和类名时别忘了和外围的引号区分开来；

向匹配的元素内部追加内容：$("ul").append("<li></li>");

将所有匹配的元素追加到指定的元素中：$("<li></li>").appendTo("ul");

将每个匹配的元素内部前置添加符合的元素：$("<li></li>").prepend("ul");

将元素添加到每个匹配的元素内部前置：$("<li></li>").prependTo("ul);

向匹配的元素后面添加元素，新添加的元素作为目标元素后的紧邻的兄弟元素：$("p").after("<div></div>;

将新建的元素插入到查找到的目标元素后，作为目标元素的兄弟节点：$("<p></p>").insertAfter("span");

在每一个匹配的元素之前插入，做为匹配元素的前一个兄弟节点：$("p").before("<span></span>");

将新建元素添加到目标元素前，做为目标元素的前一个兄弟节点：$("<a href=‘#‘>锚点</a>).inserBefore("ul");

当然如果有不想要的节点咱也可以删除

比如：删除所有匹配的元素 $("ul").remove();匹配的所有元素都删除；

还有：$("ul").empty();匹配的所有元素清空子元素，看清楚是清空不是删除；