首页 > 代码库 > 用jQuery实现简单的DOM操作

用jQuery实现简单的DOM操作

通过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=http://www.mamicode.com/‘#‘>锚点).inserBefore("ul");

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

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

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

 

用jQuery实现简单的DOM操作