当前位置: 首页 > Web前端 > CSS

JQuery干货的插入元素

时间:2023-03-31 13:28:47 CSS

JQuery干货插入元素这次用到的html和css还是我上一篇文章的源码。详细请参考上一篇分类插入子元素:append、prepend、appendTo、prependTo包裹元素:wrap、wrapAll、wrapInner插入兄弟元素:after、before、insertAfter、insertBefore替换元素:replaceWith、replaceAll删除elements:remove,deatch,unwrap,empty创建新元素的目的通常是将新元素插入到DOM位置之前,必须先创建一个新元素,然后才能将其插入到指定位置。使用$createelement$(

![](rose.png)
)clone克隆元素,使用clone方法使用已有元素为模型生成新元素,起到关键作用作用于后面的插入元素。如果你想在html中引用一个标签内容,如果你不使用clone方法,那么这个内容就会被移动,所以这里使用clone会非常好用,为了方便,请看append的用法示例详细信息:$("div.dcell").clone();//这里的clone方法一定是JQuery对象调用使用DOMAPI创建新元素DOMAPI是js操作的,实际上jquery在幕后悄悄调用了DOMAPI实例:vardivElem=document.createElement("div");//创建一个div元素divElem.classList.add("dcell");//添加class=dcell到divvarimgElem=document.createElement("img");imgElem.src="百合.png";divElem.appendChild(imgElem);//在新创建的元素后面插入imgvarnewElem=$(divElem);newElem.each(function(index,elem){console.log(elem.tagName+""+elem.className);});append指的是参数指定的元素被插入到所有JQuery包含的元素内容的末尾,成为它们的最后一个子元素,形式有append(html),append(Jquery),append(HTMLElements[]),append(function())例子://这里append元素是用来创建一个div元素,元素插入到最后成为div的子元素//varorchildElems=$("
").append("![](orchid.png)").append("Orchild:").append("");varnewElems=$("
").append("![](lily.png)").append("百合:").append("").css("border",'thickdoublered');$("div.drow").append(orchildElems);//最后插入数据,这里的参数是jquery对象$("div.drow").append(function(index,elem){if(elem.id=='row1')returnorchildElems;elseif(this.id='row2')returnnewElems;})$("div.drow").last().append(orchildElem,newElems);//给它添加两个参数,插入的顺序undefined形式为after(content[content,]),after(function()),其中content内容包括HTML字符串、DOM元素、文本节点、元素数组和文本节点,或者jQuery对象,用于插入到集合中每个匹配元素的后续实例:varorchildElems=$("
").append("![](orchid.png)").append("Orchild:").append("");//创建dcell内容$("div.dcell").after(orchildElems);//插入一个元素作为兄弟元素,在当前元素后面$("#row1div.dcell").after(function(index,html){//index表示索引,html表示原html文本,引用html之前没有插入什么console.log(html);if(index==0)returnorchildElem;//returncanbejqueryobject,htmltextelseif(index==1)returnnewElems;});});根据参数设置,before在匹配元素前插入内容。形式同后,内容大同小异。).insertBefore("#row2div.dcell");insertAfter和append类似,只是参数是要插入的目标位置,这里也是作为兄弟元素插入的例子:orchildElems.insertAfter("#row1div.dcell");wrap在集合中匹配的每个元素周围包装一个HTML结构,它将作为父元素以wrap(html),wrap(jquery),wrap(HtmlElements[]),wrap(function())的形式存在instance:div=$("
").css("border",'粗双红');$("div.drow").wrap(div);//在drow的外层添加一个div作为父元素,可以看到当前源码变成了...
$(".drow").wrap(function(index){//index是索引//if($(this).has("img[src*=astor]").length>0)if(index==0)returndiv;//只在第一个drow添加父元素divelsereturn$("
").css("border",'thickdoubleblue');})unwrap从匹配元素集中移除父元素,将其自身(和兄弟元素,如果有的话)留在原处。形式是unwrap(),unwrap(selector)的实例:$("div.dcell").css("border",'thickdoublered');$("div.dcell").children("img").首先()。展开();//这里删除第一个img元素的父元素,保留子元素$("div.dcell").children("img").unwrap(":first");//这里通过参数过滤当前要删除父元素的元素。这里选择第一个元素wrapAll,在集合中所有匹配的元素外面包裹一个HTML结构,即结果集中的所有元素设置一个相同的父元素,以wrapAll(html)的形式包裹所有元素,wrapAll(jquery),wrapAll(htmlElements[]),wrapAll(function())示例:vardiv=$("
").css("border",'thickdoublered');$("div.drow").wrapAll(div);//这里的div变成了他的共享父元素,原来的父一级元素变成了祖先元素$("img").wrapAll(div);//这里的img没有共同的父元素,所以会强制把所有的元素拉到一起,为它们设置一个父元素匹配元素中wrapInner的内容外包了一层结构,即加了一个父元素传给匹配元素的后代元素,但是这个父元素是匹配元素的子元素,即原来的匹配元素变成了祖先元素,形式有wrapInner(html),wrapInner(jquery),wrapInner(htmlElements),wrapInner(function())示例:vardiv=$("
").css("border",'thickdoublered');$(".dcell").wrapInner(div);//这里的dcell元素会成为祖先元素,div会成为内部后代元素的新父元素replace用提供的内容替换集合中的所有匹配项匹配元素并以replace(html),replaceWith(jquery),replaceWith(function())形式返回删除元素的集合instance:varnewElems=$("").append("![](lily.png)").append("Lily").append("").css("border",'thickdoubleblue');$(".dcell:first").replaceWith(newElems);//用newElems替换第一个dcell$("div.drowimg").replaceWith(function(){if(this.src.indexOf("rose")>-1)return$("![](lily.png)").css("border",'thickdoublered');//返回的内容可以是jquery或者htmlelseif(this.src.indexOf("peony")>-1)returnnewElems;elsereturn$(this.clone()).css("border",'thickdoubleblue');})replaceAll将每个目标元素替换为集合中的匹配元素.replaceAll()与.replaceWith()类似,但是目标和源是相反的示例:$("![](lily.png)").replaceAll("#row1img");//这里使用![](lily.png)替换所有img元素remove将从DOM中删除匹配的元素集,同时移除元素上的事件和jQuery数据实例:$("div.dcell").remove(":has(img[src*=rose])");//删除img$("div.dcell:first()").remove();//在没有参数detach的情况下从DOM中移除所有匹配的元素,.detach()方法和.remove()一样,除了.detach()保存所有与被移除元素关联的jQuery数据。当您需要删除一个元素并在不久之后将该元素插入到DOM中时,这种方法很有用。示例:$("div.dcell").detach();$("div.dcell").detach(":has(img[src*=rose])");empty从DOM元素的所有子节点集合中移除匹配项。$("div.dcell:first").empty();//删除所有子节点参考文章JQuery中文文档更多内容请移步我的博客