JQuery干货篇之插进去元素

2024年3月30日 135次阅读来源: 爱撒谎的男孩

JQuery干货篇之插进去元素

本次运用的html,css照样我上一篇的源代码，概况请看上一篇文章

建立新元素

通常在把新元素插进去到DOM中的目的位置之前，要先建立一个新元素才将它插进去到指定位置

运用$建立元素
$(<div>![](rose.png)</div>)

clone

克隆元素，运用clone要领以已有的元素为模型天生新的元素，这个在背面的插进去元素起到关键作用，假如在要援用html中的一个标签内容的话，不运用clone要领，那末就会将这段内容挪动，因而这里运用clone会很轻易，细致请看append的用法实例
实例：

    $("div.dcell").clone();    //这里的clone要领必需是JQuery对象挪用

运用DOM API建立新元素

DOM API是用js操纵的，实在jquery在幕后偷偷的挪用DOM API
实例：

     var divElem=document.createElement("div");    //建立一个div元素
     divElem.classList.add("dcell");       //为div增加class=dcell

    var imgElem=document.createElement("img");
    imgElem.src="lily.png";

    divElem.appendChild(imgElem);   //在新建立的元素背面插进去img

    var newElem=$(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的子元素
//
    var orchildElems = $("<div class='dcell'></div>").append("![](orchid.png)")
        .append("<label for='orchild'>Orchild:</label>")
        .append("<input name='orchild' value='0' required>");

    var newElems = $("<div class='dcell'></div>").append("![](lily.png)")
        .append("<label for='lily'>Lily:</label>")
        .append("<input name='lily' value='0' required>")
        .css("border", 'thick double red');
        
    $("div.drow").append(orchildElems);   //在末端插进去数据，这里的参数是jquery对象
    
    
    $("div.drow").append(function(index,elem){
    
    if(elem.id=='row1')
        return orchildElems;
    
    else if(this.id='row2')
        return newElems;
    })
    
    
    $("div.drow").last().append(orchildElem,newElems);   //在个中增加两个参数，插进去的前后依据参数的前后位置，固然个中的参数个数没有限定

prepend

和append完整相反,向当前元素的前面插进去html节点作为当前元素的子元素,情势有prepen d(Jquery),prepend(html),prepend(htmlElemnts[]),prepend(function())
实例：

      var orchildElems = $("<div class='dcell'></div>").append("![](orchid.png)")
        .append("<label for='orchild'>Orchild:</label>")
        .append("<input name='orchild' value='0' required>");
    $("div.dcell").prepend(orchildElems);    //将orchildElems插进去到div.dcell的最前面，作为他的子元素
    
    
    $("div.dcell").prepend("![](lily.png)"); //将参数html的内容插进去到前面，作为子元素
    
    
    
    $("div.drow").append(function (index) {     //参数是函数，index是索引，返回的内容就是要插进去到前面的内容

         if (this.id == 'row1')
             return orchildElem;                //返回的对象可所以jquery对象，也可所以html标签，如：return "![](lily.png)

         else if (this.id = 'row2')
             return newElems;
     });

appendTo

appendTo是和append一样的函数，都是将指定的元素插进去到指定元素的前面作为子元素，然则他们的参数就差别了，append是将指定的参数插进去到当前挪用它的的效果鸠合，而appendTo是将当前挪用它的效果集插进去到指定的参数中，重要的情势有appendTo(jquery),append(HTMLELments[])
实例：


$("![](lily.png)").appendTo($("img").last().parent());   //将图片插进去到末了一个dcell中，这里参数是目的位置，开首挪用的时想要插进去的内容

$("img:first").clone().appendTo($("img").last().parent()); //挑选第一个图片插进去到末了一个dcell中，这里必需用clone，不然就会将这张图片移到目的位置

 $($("div.dcell").html()).appendTo($("img").last().parent());   //这里的.html()是猎取html文本内容

prependTo

.prepend()和.prependTo()完成一样的功用，重要的差别是语法，插进去的内容和目的的位置差别。关于 .prepend() 而言，挑选器表达式写在要领的前面，作为待插进去内容的容器，将要被插进去的内容作为要领的参数。而 .prependTo() 恰好相反，将要被插进去的内容写在要领的前面，可所以挑选器表达式或动态建立的标记，待插进去内容的容器作为参数。

after

在婚配元素鸠合中的每一个元素背面插进去参数所指定的内容，作为其兄弟节点。情势有after(content[content,]),after(function()),这里的content内容有HTML字符串，DOM 元素，文本节点，元素和文本节点的数组，或许jQuery对象，用来插进去到鸠合中每一个婚配元素的背面
实例：

      var orchildElems = $("<div class='dcell'></div>").append("![](orchid.png)")
        .append("<label for='orchild'>Orchild:</label>")
        .append("<input name='orchild' value='0' required>");     //建立一个dcell内容
        
    
        $("div.dcell").after(orchildElems);   //插进去元素作为兄弟元素，在当前元素的背面
        
        
        $("#row1 div.dcell").after(function (index, html) {    //index示意索引，html示意本来的html文本，指的是没有插进去之前的html
        console.log(html);
        if (index == 0)return orchildElem;        //返回的可所以jquery对象，html文本
        else if (index == 1)
            return newElems;
    });
});

before

依据参数设定，在婚配元素的前面插进去内容,情势和after一样，内容也差不多

insertBefore

和prependTo的用法差不多，只是参数是要插进去的目的位置，作为兄弟元素插进去
实例：

orchildElems.clone().insertBefore("#row2 div.dcell");

insertAfter

和append用法差不多，只是参数是要插进去的目的位置，这里的也是作为兄弟元素插进去的
实例：

orchildElems.insertAfter("#row1 div.dcell");

wrap

在鸠合中婚配的每一个元素四周包裹一个HTML构造，将会作为父元素存在。情势为wrap(html),wrap(jquery),wrap(HtmlElements[]),wrap(function())
实例：

    div=$("<div></div>").css("border",'thick double red');
    $("div.drow").wrap(div);     //在drow外层增加了一个div将作为父元素，能够看到如今的源代码变成了<div style...><div class='drow'>...</div></div>
    
    
    $(".drow").wrap(function (index) {   //index是索引
    //if($(this).has("img[src*=astor]").length>0)
    if(index==0)
        return div;      //只在第一个drow中增加父元素div
    else 
        return $("<div></div>").css("border",'thick double blue');
})

unwrap

将婚配元素鸠合的父级元素删除，保留本身（和兄弟元素，假如存在）在本来的位置。情势为unwrap(),unwrap(selector)
实例：

  $("div.dcell").css("border",'thick double red');
    $("div.dcell").children("img").first().unwrap();   //这里将第一个img元素的父级元素删除，而且保留了个中的子元素
    
    $("div.dcell").children("img").unwrap(":first");   //这里运用参数来挑选要删除父级元素的当前元素，这里挑选第一个元素

wrapAll

在鸠合中一切婚配元素的表面包裹一个HTML构造,也就是为效果鸠合的一切元素都设置了一个雷同的父级元夙来包裹一切的元素，情势为wrapAll(html),wrapAll(jquery),wrapAll(htmlElements[]),wrapAll(function())
实例：

var div = $("<div></div>").css("border", 'thick double red');
$("div.drow").wrapAll(div);    //这里的div成为了他共有的父级元素，本来的父级元素变成了先人元素了
$("img").wrapAll(div);  //这里的img没有配合的父元素，那末就会强迫的将一切的元素拉在一起为他们设置一个父级元素

wrapInner

在婚配元素里的内容外包一层构造,也就是为婚配元素的子女元素增加一个父级元素，然则这个父级元素是婚配元素的子代元素，也就是本来的婚配元素变成了先人元素，情势为wrapInner(html),wrapInner(jquery),wrapInner(htmlElements),wrapInner(function())
实例：

    var div = $("<div></div>").css("border", 'thick double red');
    $(".dcell").wrapInner(div);    //这里的dcell元素将会变成先人元素，而div将会变成内部子女元素新的父级元素

replaceWith

用供应的内容替代鸠合中一切婚配的元素而且返回被删除元素的鸠合,情势为replace(html),replaceWith(jquery),replaceWith(function())
实例：

 var newElems = $("<div class='dcell'></div>").append("![](lily.png)")
 .append("<label for='lily'>Lily</label>").append("<input name='lily' value='0' required>").css("border", 'thick   double blue');
$(".dcell:first").replaceWith(newElems);  //用newElems替代第一个dcell


$("div.drow img").replaceWith(function () {
    if (this.src.indexOf("rose") > -1)
        return $("![](lily.png)").css("border",'thick double red'); //返回的时替代的内容，可所以jquery或许html
    else if (this.src.indexOf("peony") > -1)
        return newElems;
    else return $(this.clone()).css("border",'thick double blue');

})

replaceAll

用鸠合的婚配元素替代每一个目的元素。.replaceAll()和.replaceWith()功用相似，然则目的和源相反
实例：

 $("![](lily.png)").replaceAll("#row1 img");   //这里运用![](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中文文档
更多内容请移步本人博客

    原文作者：爱撒谎的男孩
    原文地址: https://segmentfault.com/a/1190000009151551
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网

JQuery干货篇之插进去元素

JQuery干货篇之插进去元素

分类

建立新元素

clone

运用DOM API建立新元素

append

prepend

appendTo

prependTo

after

before

insertBefore

insertAfter

wrap

unwrap

wrapAll

wrapInner

replaceWith

replaceAll

remove

detach

empty

参考文章