新浦京81707con > 软件下载 > jquery实现动态添加html代码,用法详解

原标题:jquery实现动态添加html代码,用法详解

浏览次数:114 时间:2019-09-05

该函数属于jQuery对象(实例)。

语法

jQueryObject.after( content1 [, content2 [, contentN ]] )

前天大家来看一下几段代码,然后依照这几段代码我们来上学一下如何科学的学习动态增加html。

葡京投注开户 1

返回值

after()函数的重回值为jQuery类型,重回当前jQuery对象自己(以便于进行链式风格的编制程序)。

静心:假诺插入的故事情节是时下页面中的有些因素,那么那个成分将从原岗位上未有。简单来讲,这一定于五个运动操作,实际不是复制操作。

四.prependTo()方法-内部插入

prependTo() 方法向每一种相称成分内部的序幕地方扩张钦定的从头到尾的经过。
骨子里,使用这几个情势是颠倒了例行的$(A).prepend(B)的操作,即不是把B追加到A中,而是把A追加到B中。
语法:
$(content).prependTo(selector)
Selector : Selector, Element, jQuery
一个选拔符,元素,HTML字符串,DOM元素数组,可能jQuery对象;符合的要素们会被插入到由参数钦定的靶子的末梢。
例子1代码:

var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').prependTo ($("body")).text($backToTopTxt).attr("title", $backToTopTxt)

解释
制造代码如下,地点位于被选成分body的胚胎地方.
葡京投注开户 2
用画图的秘籍表示:
例子1:

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer" ></div>
<script>
$("<div>你好</div>").prependTo("#middle");
</script>

葡京投注开户 3
葡京投注开户 4
这种写法:也是足以兑现效果与利益的:
$("<div>你好</div>").prependTo($("#middle"));
小心:上边这种写法是错误的
葡京投注开户 5
例2:

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
$(document.createTextNode("你好")).prependTo("#middle");
</script>

葡京投注开户 6
葡京投注开户 7
这种写法:也是可以完成效果与利益的:
$( document.createTextNode("你好")).prependTo($("#middle"));
例3:(采用页面上本来的贰个成分插入到另一岗位)
(1)若是增添的内容是眼前页面中的某个因素,那么这个要素将从原职责上未有。简单来讲,那是二个移动操作,并不是复制操作。

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer">你好</div>
<script>
$("span").prependTo($("#middle "));
</script>

葡京投注开户 8
葡京投注开户 9
试验了下也能够完毕效果与利益:
$("span").prependTo("#middle");
(2)追加的剧情是现阶段页面中的有个别因素,且有多少个指标元素,那么这几个因素内容将被复制然后插入到各类指标里面,原岗位内容上海消防灭。

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$("p").prependTo($(".add"));
</script>

葡京投注开户 10
葡京投注开户 11
尝试了下也得以达成效果与利益:
$("p").prependTo(".add");

钦命的剧情能够是:html字符串、DOM成分(或数组)、jQuery对象、函数(再次回到值)。

1,insertBefore(),insertAfter(),prependTo(),appendTo()那八个函数用法大约千篇一律

先看下思导图,整体掌握下,然后我们再来学习。

prepend()函数的重回值为jQuery类型,重返当前jQuery对象自小编(以便于举行链式风格的编制程序)。

返回值

insertAfter()函数的重回值为jQuery类型,重临表示插入内容的jQuery对象。

瞩目:若是当前jQuery对象匹配的要素是当前页面中的有个别因素,那么那一个因素将从原职分上未有。简单来说,这一定于一个运动操作,并不是复制操作。

七.before()方法和insertBefore()方法-外界插入

before()方法来动态增加代码
向成分的前方加多html代码,要是成分前边有成分了,这将眼下的因素前移,然后将html代码插入。
语法:
.before(String/Element/jQuery)
点名的剧情能够是:html字符串、DOM成分(或数组)、jQuery对象、函数(重回值)
依旧上三个代码
在生成li的代码中,个中有如此几句

var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label'   i   '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);

葡京投注开户 12
葡京投注开户 13

能够看出追加的代码在jquery_h3_list[i]要素代码的前边,与她是兄弟关系。
例子1:(html字符串)
用画图的艺术表示
代码:

<div id="header"></div>
<div id="middle"></div>
<div id="footer"></div>
<script>
$('#middle').before('<div>你好</div>');
</script>

葡京投注开户 14
例子2:(DOM元素)
用画图来代表下
代码:

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
$('#middle').before(document.createTextNode("你好"));
</script>

葡京投注开户 15
葡京投注开户 16
例子3:(jQuery对象)
注意:
(1)假若增添的始末是现阶段页面中的某个因素,那么那些因素将从原岗位上消灭。简单来讲,那是二个运动操作,实际不是复制操作。
代码:
用画图的艺术表示
代码:

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"></div>
<script>
$("#footer").before($("p"));
</script>

葡京投注开户 17
葡京投注开户 18
(2)追加的从头到尾的经过是眼下页面中的有些因素,且有多少个对象成分,那么那么些要素内容将被复制然后插入到种种指标里面,原职务内容上海消防失。
用画图的章程表示
代码:

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$(".add").before($("p"));
</script>

葡京投注开户 19
葡京投注开户 20
例四:(函数)
语法:
$(selector). before (function(index))
使用function(index)函数迭代管理jQuery所包蕴的各种节点,在各类节点的这段日子依次增多function(index)函数的再次回到值。index

  • 可选。接收选拔器的 index 地点。
    举例:

    middle

葡京投注开户 21
葡京投注开户 22
葡京投注开户 23

insertBefore()方法来动态增加代码
将JQuery封装好的要素插入到钦赐成分的前方,假设元素前边有成分了,那将日前的因素前移,然后将JQuery对象插入;
语法:
.insertBefore(target)
target
类型: Selector, Element, jQuery
贰个采取器,元素,HTML字符串也许jQuery对象,相称的成分将会被插入在由参数内定的对象前面。
用画图的艺术表示
例子1:
代码:

<div id="header"></div>
<div id="middle"></div>
<div id="footer" ></div>
<script>
$("<div>你好</div>").insertBefore("#middle ");

葡京投注开户 24
葡京投注开户 25
这种写法也是足以兑现效果与利益的:
$("<div>你好</div>").insertBefore($("#middle "));

在意:下边这种写法是谬误的
葡京投注开户 26

例2:

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
$(document.createTextNode("你好")).insertBefore ("#middle ");
</script>

葡京投注开户 27
葡京投注开户 28

这种写法:也是能够兑现效果与利益的:
$(document.createTextNode("你好")). insertBefore($("#middle "));
例3:(选用页面上土生土长的一个要素插入到另一职位)
(1)如果扩大的原委是当下页面中的有些因素,那么这几个因素将从原岗位上海消防灭。简来讲之,那是多个平移操作,并不是复制操作。

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer">你好</div>
<script>
$("span").insertBefore($("#middle")); 
</script>

葡京投注开户 29
葡京投注开户 30
尝试了下也足以完成效果与利益:
$("span"). insertBefore("#middle ");

(2)追加的内容是近期页面中的有些因素,且有五个目的成分,那么这几个元素内容将被复制然后插入到各样指标里面,原来的地点置内容上海消防灭。

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$("p").insertBefore($(".add")); 
</script>

葡京投注开户 31
葡京投注开户 32

试验了下也得以兑现效果与利益:
$("p").insertBefore(".add");

jQuery 1.4 新扩大帮忙:参数content1得以为函数。prepend()将基于相称的具备因素遍历试行该函数,函数中的this将对准对应的DOM成分。

示例&说明

insertAfter()函数用于将具有相称成分插入到内定成分之后的职分:

<p>段落文本1</p>
<p>段落文本2</p>

<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$('<!--插入到p元素之后的位置-->').insertAfter( "p" );
// 其返回值就是匹配插入内容(两个注释元素'<!--插入到p元素之后的位置-->')的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->

<p>段落文本1</p><!--插入到p元素之后的位置-->
<p>段落文本2</p><!--插入到p元素之后的位置-->

请注意insertAfter()函数和after()函数的差别:

var $A = $("s1");
var $B = $("s2");

// 将$A插入到$B之后
$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )
// 将$B插入到$A之后
$A.after( $B ); // 返回$A

以上边这段HTML代码为例:

<p id="n1">
    span#n2    
</p>
<p id="n3">
    <label id="n4" class="move">label#n4</label>
</p>
<p id="n5">
    span#n6
</p>

以下jQuery示例代码用于演示insertAfter()函数的切实可行用法:

// 将一个自定义的i元素插入到n4之后
$('<i>i元素</i>').insertAfter( "#n4" );

// 将n4插入到n2之后
// n4将从原位置上消失
$('#4').insertAfter( document.getElementById("n2") );

//将一个自定义的strong元素插入到每个span元素之后
$("<strong>插入文本</strong>").insertAfter( "span" );

运营代码

insertAfter()会将日前相配成分插入到对象成分的终结标识之后不会额外增多别的空白字符,上述代码实行后的完好html代码如下(格式未作别的调解):

<p id="n1">
    span#n2<strong>插入文本</strong>    
</p>
<p id="n3">
    <label id="n4" class="move">label#n4</label><i>i元素</i>
</p>

 

2,after()函数用法详解(别的八个可仿照效法其用法)

 

after()函数用于在每种相称成分之后插入内定的剧情

点名的内容能够是:html字符串、DOM成分(或数组)、jQuery对象、函数(重临值)。

与该函数相对的是before()函数,用于在各样相配成分此前插入钦定的情节。

该函数属于jQuery对象(实例)。

六.appendTo方法-内部插入

appendTo() 方法在被选成分的尾声(如故在内部)插入钦定内容。
骨子里,使用那些格局是颠倒了例行的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
语法:
$(content).appendTo(selector)
Selector : Selector, Element, jQuery
贰个选取符,成分,HTML字符串,DOM成分数组,只怕jQuery对象;符合的要素们会被插入到由参数钦命的靶子的末尾。

例子1代码:

var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")).text($backToTopTxt).attr("title", $backToTopTxt)

解释
创制代码如下,地点放在被选成分body的结尾巴部分分.

葡京投注开户 33
例子2代码:

function CreateDom() {
   var select = $("<select/>").appendTo($("body"));
   var option1 = $("<option value="1">text1</option>").appendTo(select);
   var option2 = $("<option value="2">text2</option>").appendTo(select);
   var option3 = $("<option value="3">text3</option>").appendTo(select);
   var text = $("<input type="text">").css({ "width": "150px", "border": "1px lightgrey solid" }).appendTo($("body"));
   var checkbox = $("<input type="checkbox" />").appendTo($("body"));
   var ul = $("< ul/>").appendTo($("body"));
   var li = $("<li>li1</li>").appendTo(ul);
   var li = $("<li>li2</li>").appendTo(ul);
}

葡京投注开户 34
用画图的点子表示:
例子1:
代码:

<div id="header"></div>
<div id="middle"></div>
<div id="footer" ></div>
<script>
$("<div>你好</div>").appendTo("#middle");
</script>

葡京投注开户 35

这种写法:也是能够兑现效益的:

$("<div>你好</div>").appendTo($("#middle"));
小心:上边这种写法是破绽百出的
葡京投注开户 36
例2:

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
$(document.createTextNode("你好")).appendTo("#middle");
</script>

葡京投注开户 37
葡京投注开户 38
这种写法:也是能够达成效果与利益的:
$( document.createTextNode("你好")).appendTo($("#middle"));
例3:(采用页面上本来的三个要素插入到另一岗位)
(1)假设扩充的内容是时下页面中的有个别因素,那么那么些要素将从原岗位上没有。一句话来讲,那是一个移动操作,并非复制操作。

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer">你好</div>
<script>
$("span").appendTo($("#middle"));
</script>

葡京投注开户 39
葡京投注开户 40
试验了下也能够实现效果与利益:
$("span").appendTo("#middle");
(2)追加的剧情是日前页面中的有个别因素,且有多少个目的成分,那么这一个因素内容将被复制然后插入到各种目的里面,原岗位内容上海消防灭。

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$("p").appendTo($(".add"));
</script>

葡京投注开户 41
葡京投注开户 42
尝试了下也得以达成效果与利益:
$("p").appendTo(".add");
拓展:

1.事先在标题问了下代码中:
var select = $("<select/>").appendTo($("body"));
何以写的是<select/>,不过js在页面包车型地铁body里依然生成了
<select></select>,不是很领悟?
实在那是因为JQuery会自动的完善html代码,也正是说,假令你要推行以下操作
$('content').append('<p>CSDN');
那么实际上插入到标识中的html代码是
<p>CSDN</p>
另外
HTML 标签是由尖括号包围的重中之重词,举例 <html> ,常常是成对出现的,举个例子 <b></b>。那个成对出现的HTML 标签,第三个标签是从头标签,第一个标签是终结标签。
而那个未有安息标签的空成分如<br />在开头标签中加多斜杠,比方 <br />,是关门空成分的准确性方法。
而这里的<select>并非自闭合标签,它的全体的写法实际上应该是<select></select>,而<select/>这种写法实际上html标签并不曾关闭,也正是只写了最先标签<select>,JQuery会自动的一揽子html代码,所以追加的代码是总体的<select></select>。可是要记得假若是只写了关闭标签,开头标签未有写的话,JQuery是不会周全html代码的,如那样的
$("</select>").appendTo($("body"));
结果页面上并从未被插入代码。
2.appendTo方法与append方法分别
appendTo() 方法与appendT方法都以在被选成分的末梢(如故在里面)插入钦命内容。
今是昨非的是:
append方法常规的((A).append(B)的操作是把B追加到A中, 而appendTo方法)(A).append(B)的操作,是把A追加到B中。
即:
append()后面是要选择的靶子,后边是要在对象内插入的因素内容,功能要高点, appendTo()后边是要插入的成分内容,而前面是要挑选的对象
切实的本身就十分少讲了,还不明白的话可以参照小说jQuery的append和appendTo

$(selector).prepend(content)

示例&说明

after()函数用于在各种相配成分之后的职位插入内容:

<p>段落文本1</p><!--插入到p元素之后的位置-->
<p>段落文本2</p><!--插入到p元素之后的位置-->


<script type="text/javascript">
$("p").after( '<!--插入到p元素之后的位置-->' ); 
</script>

请注意after()函数和insertAfter()函数的分别:

var $A = $("s1");
var $B = $("s2");


// 将$B插入到$A之后
$A.after( $B ); // 返回$A
// 将$A插入到$B之后
$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )

以上面这段HTML代码为例:

<p id="n1">
    span#n2    
</p>
<p id="n3">
    <label id="n4">label#n4</label>
    <i id="n5">i#n5</i>
</p>

以下jQuery示例代码用于演示after()函数的具体用法:

// 在n4之后插入一个自定义的span元素
$("#n4").after('span#n6(new)');

// 在n2之后插入n5
// n5将从原位置上消失
$("#n2").after( document.getElementById("n5") );

// 在每个span元素之后插入自定义的strong元素
$("span").after( function(index, innerHTML){
    return '<strong>strong元素'   (index   1)   '</strong>';
} );

运维代码

after()会将内容插入钦命成分的得了标志之后不会附加增添任何空白字符,上述代码实践后的共同体html代码如下(格式未作别的调节):

<p id="n1">
    span#n2<strong>strong元素1</strong><i id="n5">i#n5</i>    
</p>
<p id="n3">
    <label id="n4">label#n4</label>span#n6(new)<strong>strong元素2</strong>
    
</p>

一.html()方法

html函数的功力原理首先是移除指标成分内部的html代码,然后将新代码增多到目的成分。
先是段代码:

function CommentBubble()
{
    var w1 = '<div class="list">'  
    '<table class="out" border="0" cellspacing="0" cellpadding="0"> '  
    '<tr>'  
    '<td class="icontd" align="right" valign="bottom">'  
    '<img src="http://www.regboy.com/uploads/allimg/190905/0J0046039-42.gif" width="70px" height="60px"/>'  
    '</td>'  
    '<td align="left" valign="bottom" class="q">'  
    '<table border="0" cellpadding="0" cellspacing="0" style=""> '  
    '<tr><td class="topleft"></td><td class="top"></td><td class="topright"></td></tr> '  
    '<tr><td class="left"></td> <td align="left" class="conmts"><p>';
    var w2 = '</p> </td> <td class="right"></td></tr> '  
    '<tr><td class="bottomleft"></td><td class="bottom"></td><td class="bottomright"></td></tr> '  
    '</table>'  
    '</td> '  
    '</tr> '  
    '</table> '  
    '</div>';
    $.each($(".blog_comment_body"), function(i, t) {
    $(t).html(w1   $(t).html()   w2);
    });

$(".louzhu").closest(".feedbackItem").find(".out").removeClass("out").addClass("inc"); 

}

使用前
葡京投注开户 43

使用后:
葡京投注开户 44

知识点
这段代码实际上利用了html()方法来动态增进代码
关键点在

$.each($(".blog_comment_body"), function(i, t) {
    $(t).html(w1   $(t).html()   w2);
    });

连带知识点:
1. each()是遍历方法, 简单来讲each正是个循环语句。
看一下例证:

// each处理一维数组
  var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });
  // 处理json数据,例如ajax的返回值     
  var obj = { one:1, two:2, three:3};      
 $.each(obj, function(key, val) {      
      alert(key); 
      alert(val); 
  });

function (i, value)中i 是现阶段因素的职分,value是值。
例子:

$.each([2,3,4],function(index,value){alert('第'  index  '数是' value);});

2.html() 方法
语法:
$(selector).html(content)
例子:
$("p").html("W3School");
3.closest()方法
closest() 方法获得至极选取器的首先个祖先元素,从当下成分开头沿 DOM 树向上。重返包涵零个或贰个成分的 jQuery 对象
代码

$(".louzhu").closest(".feedbackItem").find(".out").removeClass("out").addClass("inc");

分解:用closest找到class=" louzhu "的祖辈成分中符合是feedbackItem的竹签的因素,发掘.out,然后移除这些类,加上类inc
葡京投注开户 45

留意看一下,发掘楼主层的样式与普通楼的不均等,气泡颜色不相同,楼主层有图片头像,普通层未有
有心人查一下,开掘,普通层
.list .out .icontd {
display: none
}
这么图片就不会出现.
葡京投注开户 46

葡京投注开户 47

假使依然不懂的话,能够参谋那篇小说jQuery笔记:jQuery筛选器找父亲parent,closest,parents,parentUntil

语法

2, 与之相对的有多个函数:Before(),After(),prepend(),append()

五.append ()方法-内部插入

语法:
.append(String/Element/jQuery)
内定的开始和结果能够是:html字符串、DOM成分(或数组)、jQuery对象、函数(再次回到值)。
留意:插入每一个相称成分里面的结尾(在内部)
例:
$('body').append('<a href="#" id="toTop" style="bottom: 77px; "></a>');
葡京投注开户 48
例子1:( html字符串)
用画图的格局表示
代码:

<div id="header"></div>
<div id="middle"></div>
<div id="footer"></div>
<script>
$("#middle").append("<div>你好</div>");`
</script>

葡京投注开户 49
例子2:(DOM元素)
用画图的法子表示
代码:

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"></div>
<script>
$("#middle").append(document.createTextNode("你好"));
</script>

葡京投注开户 50
葡京投注开户 51
例子3:(jQuery对象)
(1)假如扩展的从头到尾的经过是日前页面中的某个因素,那么这一个因素将从原位置上海消防灭。简来说之,那是一个活动操作,并非复制操作。
代码:

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer">你好</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
$("#middle").append($("span"));
</script>

葡京投注开户 52
葡京投注开户 53
(2)追加的内容是这段时间页面中的有些因素,且有多个对象成分,那么那几个成分内容将被复制然后插入到各类目的里面,原来的地点置内容上消灭。
用画图的措施表示
代码:

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$(".add").append($("p"));
</script>

葡京投注开户 54
葡京投注开户 55
例四:(函数)
语法
$(selector).append (function(index,html))
率先个参数就是当下成分在匹配成分中的索引,第一个参数就是该因素当前的内部html内容(innerHTML)。函数的再次来到值就是索要为该因素追加的剧情(能够是html字符串、DOM成分、jQuery对象)。
瞩目:唯有首先个参数可感到自定义函数,用于遍历实施。假诺之后的参数也为函数,则调用其toString()方法,将其转为字符串,并视为html内容。
举例1:

<div id="header" class="add"> 
header</div>
<div id="middle" class="add">
middle</div>
<div id="footer" class="add">
footer</div>
<button>结尾添加内容</button>
<script>
 $(document).ready(function(){
  $("button").click(function(){
    $(".add").append(function(n){
      return "<b>你好 "   n   "</b>";
     });
   });
 }); 
</script>

葡京投注开户 56
葡京投注开户 57
葡京投注开户 58
葡京投注开户,举例2:

<div id="header" class="add"> 
1.</div>
<div id="middle" class="add">
2.</div>
<div id="footer" class="add">
3.</div>
<script>
 // 定义一个数组  
    var books = [  
        {name: "Java" , price:109},  
        {name: "Java EE" , price:89},  
        {name: "Android" , price:89}]  
    // 使用函数为不同div元素动态添加不同的内容  
    $(".add").append(function(i)  
    {  
        // i代表jQuery对象中正在迭代处理的元素的索引,因此为0、1、2...  
        return "<b>书名是《"   books[i].name  
              "》,价格是:"   books[i].price;  
    })  
</script>

葡京投注开户 59
葡京投注开户 60
葡京投注开户 61

参数

参数

参数 描述
target String/Element/jQuery类型指定的目标元素,以便于在该目标之后插入当前匹配的元素。

如若参数target为字符串类型,则将其用作jQuery选用器或html内容字符串,jQuery会自行推断。

八.after方法和insertAfter()方法-外界插入

after方法:向成分的背后增多html代码,若是元素后边有成分了,这将后面的成分后移,然后将html代码插入。
语法:
.after(String/Element/jQuery)
点名的内容能够是:html字符串、DOM成分(或数组)、jQuery对象、函数(重临值)。
例子1:(html字符串)

<div id="header"></div>
<div id="middle"></div>
<div id="footer"></div>
<script>
$("#middle").after("<div>你好 </div>");
</script>

葡京投注开户 62
葡京投注开户 63
例子2:(DOM元素)

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer"></div>
<script>
$("#middle").after(document.createTextNode("你好")); 
</script>

葡京投注开户 64
葡京投注开户 65
例子3:(jQuery对象)
(1)假设扩充的原委是眼前页面中的有个别因素,那么那么些因素将从原岗位上海消防灭。简单的讲,那是三个活动操作,并不是复制操作。
代码:

<div id="header"></div>
<div id="middle"><p>hello</p></div>
<div id="footer">你好</div>
<script>
$("#middle").after($("span"));
</script>

葡京投注开户 66
葡京投注开户 67
(2)追加的内容是眼前页面中的有个别因素,且有两个指标成分,那么这个成分内容将被复制然后插入到每一个目的里面,原来的地点置内容上海消防灭。
用画图的点子表示
代码:

<div id="header" class="add"></div>
<div id="middle"><p>hello</p></div>
<div id="footer" class="add"></div>
<script>
$(".add").after($("p"));
</script>

葡京投注开户 68
葡京投注开户 69
例子4:(函数)
语法:
$(selector).after(function(index))
选拔function(index)函数迭代管理jQuery所蕴涵的各类节点,在每一个节点的前面依次增添function(index)函数的重临值。index

  • 可选。接收选拔器的 index 地点。
    举例1:

    hello