jquery实现动态添加html代码

先看下思导图，整体了解下，然后我们再来学习。

现在我们来看一下几段代码，然后根据这几段代码我们来学习一下如何正确的学习动态添加html。

一.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://files.cnblogs.com/files/wangqiguo/touxiang2.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"), functioni, t) {
	$t).htmlw1 + $t).html) + w2);
	});
 
$".louzhu").closest".feedbackItem").find".out").removeClass"out").addClass"inc"); 

}

使用前
我的前端之路-博客园

使用后：
我的前端之路-博客园

知识点
这段代码实际上使用了html)方法来动态添加代码
关键点在

$.each$".blog_comment_body"), functioni, t) {
	$t).htmlw1 + $t).html) + w2);
	});

相关知识点：
1. each)是遍历方法, 简单的说each就是个循环语句。
看一下例子：

// each处理一维数组
  var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.eacharr1, functioni,val){      
      alerti);   
      alertval);
  });
  // 处理json数据，例如ajax的返回值     
  var obj = { one:1, two:2, three:3};      
　$.eachobj, functionkey, val) {      
      alertkey); 
      alertval); 
  });

function i, value)中i 是当前元素的位置，value是值。
例子：

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

2.html) 方法
语法：
$selector).htmlcontent)
例子：
$"p").html"W3School");
3.closest)方法
closest) 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。返回包含零个或一个元素的 jQuery 对象
代码

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

解释：用closest找到class=" louzhu "的祖辈元素中符合是feedbackItem的标签的元素，发现.out，然后移除这个类，加上类inc
我的前端之路-博客园

仔细看一下，发现楼主层的样式与普通楼的不一样，气泡颜色不一样，楼主层有图片头像，普通层没有
仔细查一下，发现，普通层
.list .out .icontd {
display: none
}
这样图片就不会出现.
我的前端之路-博客园

我的前端之路-博客园

如果还是不懂的话，可以参考这篇文章jQuery笔记：jQuery筛选器找父亲parent,closest,parents,parentUntil

二.prepend)方法-内部插入

prepend)函数用于向每个匹配元素内部的起始位置追加指定的内容。
语法：
.prependString/Element/jQuery)
指定的内容可以是：html字符串、DOM元素或数组)、jQuery对象、函数返回值)。

第二段代码：

window.onload = function ) {
$'#div_digg').prepend'<div style="padding-bottom: 5px"><span class="icon_favorite" style="padding-top: 2px"></span><a onclick="follow);return false;" href="javascript:void0);" style="font-weight: bold; padding-left:5px;">关注一下楼主吧</a> </div>'); 
}

我的前端之路-博客园
说明：
这主要用来了.prepend)方法
我的前端之路-博客园

可以看到，代码被插入到被选元素的开头位置位于内部）。
用画图来表示下
例子1：（html字符串）
代码：

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

我的前端之路-博客园
例子2：（DOM Element ）
用画图来表示下
代码：

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

我的前端之路-博客园
例子3：（jquery对象）
初始
我的前端之路-博客园
我的前端之路-博客园
加入代码：
$"#header").prepend$"#middle"));
我的前端之路-博客园
我的前端之路-博客园
具体解释可以看下面的拓展2的讲解。
例子4：（函数）
使用匿名函数向指定元素内部的前面插入节点
语法:
$selector).prependfunctionindex,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).readyfunction){
  $"button").clickfunction){
    $".add").prependfunctionn){
      return "<b>你好 " + n + "</b>";
     });
   });
 }); 
</script>




举例2:

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



拓展：
1. DOM对象与jQuery对象
（1） 什么是jQuery对象？—就是通过jQuery包装DOM对象后产生的对象。
（2）jQuery对象转成DOM对象： **
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。
1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如： $"#middle")[0]，$"div").eq1)[0]，$"p")[2]
2)jQuery本身提供，通过.getindex)方法，得到相应的DOM对象
如：$"div").get)[6]
（3）DOM对象转成jQuery对象: **
对于已经是一个DOM对象，只需要用)把DOM对象包装起来，就可以获得一个jQuery对象了。)DOM对象)
如：$document.getElementById"middle"))
返回的就是jQuery对象，可以使用jQuery的方法。
2.对原有的DOM元素进行移动（若对已在文档中存在的元素使用插入节点的方法则相当于执行“移动节点”的操作
注意：如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。
**重要:
（1） 如果有多个目标元素，内容将被复制然后插入到每个目标里面。
（2）追加的内容是当前页面中的某些元素，且有多个目标元素，那么这些元素内容将被复制然后插入到每个目标里面,原位置内容上消失。
**
例子1：
初始
我的前端之路-博客园
我的前端之路-博客园
加入代码：
$"#header").prepend$"#middle"));
我的前端之路-博客园
我的前端之路-博客园
例子2：
初始
我的前端之路-博客园
我的前端之路-博客园
加入代码
$"#header").prepend$"#middle"), $"#footer"));
我的前端之路-博客园
我的前端之路-博客园
3.与prepend)方法创建html代码，追加DOM Element ，有关的DOM方法
（1）创建节点
创建流程比较简单，大体如下：
1）. 创建节点常见的：元素、属性和文本)
2）. 添加节点的一些属性
3）. 加入到文档中
流程中涉及的一点方法：
创建元素：document.createElement
设置属性：setAttribute
添加文本：innerHTML createTextNode)
加入文档：appendChild
看个例子：

<div class="header"></div>
<div class="middle"></div>
<div class="footer"></div>
<script>
	var d=document.createElement"div");//createElement：创建一个HTML标记
	var t=document.createTextNode"你好");//添加内容 createTextNode
	d.appendChildt);//把你好添加到div标记中   appendChild:添加子标记
	document.body.appendChildd); //默认添加在文档的最后。
</script>

我的前端之路-博客园
我的前端之路-博客园

例子2：

<div id="header"></div>
<div id="middle"></div>
<div id="footer"></div>
<script>
	var d=document.createElement"div");//createElement：创建一个HTML标记
	var t=document.createTextNode"你好");//添加内容 createTextNode
	d.appendChildt);//把你好添加到div标记中   appendChild:添加子标记
	document.getElementById"middle").appendChildd); //把div标记添加到id是middle的标签中  
</script>

我的前端之路-博客园
我的前端之路-博客园

（2）document.createElement)
createElement) 方法可创建元素节点。
document.createElement)是在对象中创建一个对象，要与appendChild) 或 insertBefore)方法联合使用。

<div id="header"></div>
<div id="middle">你好</div>
<div id="footer"></div>
<script>
    var a  = document.createElement"p");
    document.getElementById"middle").appendChilda); 
</script>

我的前端之路-博客园
我的前端之路-博客园

（3）document.createTextNode)
注意：createTextNode只是纯粹创造了文本节点，所以返回的效果也就是纯文本内容。

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
    var t=document.createTextNode"你好");//添加内容 createTextNode
    document.getElementById"middle").appendChildt); 
</script>

我的前端之路-博客园
我的前端之路-博客园

（4）element.appendChild)
添加一个节点到指定的节点的子节点数组中，读起来好象有点拗口，简单地说就是将元素添加到指定的节点中
appendChild用法:
target.appendChildnewChild)
newChild作为target的子节点插入最后的一子节点之后

var d=document.createElement"div");//createElement：创建一个HTML标记
	var t=document.createTextNode"你好");//添加内容 createTextNode
	d.appendChildt);//把你好添加到div标记中   appendChild:添加子标记

（5）element.insertBefore)
insertBefore) 方法在您指定的已有子节点之前插入新的子节点。
insertBefore调用方法
parentElement.insertBeforenewElement,targetElement)
DOM提供了insertBefore)方法，要使用他需要做三件事：
1）新元素：需要插入的元素（newElement）
2）目标元素：在那个元素前插入（targetElement）
3）父元素：目标元素的父元素（parentElement）
例子：

<div id="header"></div>
<div id="middle">hello</div>
<div id="footer"></div>
<script>
var a =document.createElement"span");
var b =document.createTextNode"你好");
a.appendChildb);
var c = document.getElementById"middle");
c.parentNode.insertBeforea,c);
/*
parentElement.insertBefore newElement  ,  targetElement );
从上面语法可以看出， 父元素， 新元素，目标元素 是 insertBefore使用的3要素。
其实我们可以不管  父元素， 因为 父元素我们 可以用 目标元素.parentNode 得到。
那么insertBefore就很好用了。只要给2个参数 ： 新元素 和目标元素。
*/
</script>

我的前端之路-博客园
我的前端之路-博客园
（6）在元素后面插入一个新元素（DOM没有提供方法：并没有.insertAfter)）

三.prepend)方法2-内部插入

第三段代码

{
    var jquery_h3_list = $'#cnblogs_post_body h3');//如果你的章节标题不是h4,只需要将这里的h4换掉即可
    ifjquery_h3_list.length>0)//如果你的章节标题h3存在,追加代码创建目录。
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>阅读目录</b></p>';
        content    += '<ul>';
        forvar i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $jquery_h3_list[i]).beforego_to_top);
            var li_content = '<li><a href="#_label' + i + '">' + $jquery_h3_list[i]).text) + '</a></li>';
            content += li_content;
        }
        content    += '</ul>';
        content    += '</div>';
        if$'#cnblogs_post_body').length != 0 )
        {
            $$'#cnblogs_post_body')[0]).prependcontent);
        }
    }    
}
GenerateContentList);

我的前端之路-博客园

我的前端之路-博客园

我们来继续分析下

var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>阅读目录</b></p>';
        content    += '<ul>';
        content    += '</ul>';
        content    += '</div>';

这段主要对应的是
我的前端之路-博客园

而下面这段代码主要是生成li的代码:

forvar i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $jquery_h3_list[i]).beforego_to_top);
            var li_content = '<li><a href="#_label' + i + '">' + $jquery_h3_list[i]).text) + '</a></li>';
            content += li_content;
        }

我的前端之路-博客园

设置好html后，最后用.prependcontent);追加在文章的头部。

四.prependTo)方法-内部插入

prependTo) 方法向每个匹配元素内部的起始位置追加指定的内容。
实际上，使用这个方法是颠倒了常规的$A).prependB)的操作，即不是把B追加到A中，而是把A追加到B中。
语法：
$content).prependToselector)
Selector : Selector, Element, jQuery
一个选择符，元素，HTML字符串，DOM元素数组，或者jQuery对象；符合的元素们会被插入到由参数指定的目标的末尾。
例子1代码：

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

解释
创建代码如下，位置位于被选元素body的起始位置.

用画图的方法表示：
例子1：

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


我的前端之路-博客园
这种写法：也是可以实现效果的：
$"<div>你好</div>").prependTo$"#middle"));
注意：下面这种写法是错误的

例2：

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


我的前端之路-博客园
这种写法：也是可以实现效果的：
$ document.createTextNode"你好")).prependTo$"#middle"));
例3：（选择页面上原有的一个元素插入到另一位置）
1)如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。

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



实验了下也可以实现效果：
$"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>



实验了下也可以实现效果：
$"p").prependTo".add");

五.append )方法-内部插入

语法：
.appendString/Element/jQuery)
指定的内容可以是：html字符串、DOM元素或数组)、jQuery对象、函数返回值)。
注意：插入每个匹配元素里面的末尾（在内部）
例：
$'body').append'<a href="#" id="toTop" style="bottom: 77px; "></a>');
我的前端之路-博客园
例子1： html字符串)
用画图的方法表示
代码：

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

我的前端之路-博客园
例子2：DOM元素)
用画图的方法表示
代码：

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

我的前端之路-博客园
我的前端之路-博客园
例子3：jQuery对象)
1)如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。
代码：

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

我的前端之路-博客园
我的前端之路-博客园
（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>

我的前端之路-博客园
我的前端之路-博客园
例四：（函数）
语法
$selector).append functionindex,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).readyfunction){
  $"button").clickfunction){
    $".add").appendfunctionn){
      return "<b>你好 " + n + "</b>";
     });
   });
 }); 
</script>




举例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").appendfunctioni)  
    {  
        // i代表jQuery对象中正在迭代处理的元素的索引，因此为0、1、2...  
        return "<b>书名是《" + books[i].name  
            + "》,价格是:" + books[i].price;  
    })  
</script>



六.appendTo方法-内部插入

appendTo) 方法在被选元素的结尾（仍然在内部）插入指定内容。
实际上，使用这个方法是颠倒了常规的$A).appendB)的操作，即不是把B追加到A中，而是把A追加到B中。
语法：
$content).appendToselector)
Selector : Selector, Element, jQuery
一个选择符，元素，HTML字符串，DOM元素数组，或者jQuery对象；符合的元素们会被插入到由参数指定的目标的末尾。

例子1代码：

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

解释
创建代码如下，位置位于被选元素body的结尾部分.

我的前端之路-博客园
例子2代码：

function CreateDom) {
   var select = $"<select/>").appendTo$"body"));
   var option1 = $"<option value="1">text1</option>").appendToselect);
   var option2 = $"<option value="2">text2</option>").appendToselect);
   var option3 = $"<option value="3">text3</option>").appendToselect);
   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>").appendToul);
   var li = $"<li>li2</li>").appendToul);
}

我的前端之路-博客园
用画图的方法表示：
例子1：
代码：

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

我的前端之路-博客园
**
这种写法：也是可以实现效果的：**
$"<div>你好</div>").appendTo$"#middle"));
注意：下面这种写法是错误的

例2：

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



这种写法：也是可以实现效果的：
$ document.createTextNode"你好")).appendTo$"#middle"));
例3：（选择页面上原有的一个元素插入到另一位置）
1)如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。

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



实验了下也可以实现效果：
$"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>



实验了下也可以实现效果：
$"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).appendB)的操作是把B追加到A中，
而appendTo方法)A).appendB)的操作，是把A追加到B中。
即：
append)前面是要选择的对象，后面是要在对象内插入的元素内容，效率要高点， appendTo)前面是要插入的元素内容，而后面是要选择的对象
具体的我就不多讲了，还不明白的话可以参考文章jQuery的append和appendTo

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

before)方法来动态添加代码
向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插入。
语法：
.beforeString/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]).beforego_to_top);

我的前端之路-博客园
我的前端之路-博客园

可以看出追加的代码在jquery_h3_list[i]元素代码的前面，与他是兄弟关系。
例子1：（html字符串）
用画图的方法表示
代码：

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

我的前端之路-博客园
例子2：（DOM元素）
用画图来表示下
代码：

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

我的前端之路-博客园
我的前端之路-博客园
例子3：（jQuery对象）
注意：
1)如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。
代码：
用画图的方法表示
代码：

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

我的前端之路-博客园
我的前端之路-博客园
（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>

我的前端之路-博客园
我的前端之路-博客园
例四：（函数）
语法：
$selector). before functionindex))
使用functionindex)函数迭代处理jQuery所包含的每个节点，在每个节点的前面依次添加functionindex)函数的返回值。index – 可选。接收选择器的 index 位置。
举例：

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



insertBefore)方法来动态添加代码
将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；
语法：
.insertBeforetarget)
target
类型: Selector, Element, jQuery
一个选择器，元素，HTML字符串或者jQuery对象，匹配的元素将会被插入在由参数指定的目标后面。
用画图的方法表示
例子1：
代码：

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


我的前端之路-博客园
这种写法也是可以实现效果的：
$"<div>你好</div>").insertBefore$"#middle "));

注意：下面这种写法是错误的

例2：

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


这种写法：也是可以实现效果的：
$document.createTextNode"你好")). insertBefore$"#middle "));
例3：（选择页面上原有的一个元素插入到另一位置）
1)如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。

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



实验了下也可以实现效果：
$"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>


实验了下也可以实现效果：
$"p").insertBefore".add");

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

after方法：向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入。
语法：
.afterString/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>

我的前端之路-博客园
我的前端之路-博客园
例子2：（DOM元素）

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

我的前端之路-博客园
我的前端之路-博客园
例子3：jQuery对象)
1)如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。
代码：

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

我的前端之路-博客园
我的前端之路-博客园
（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>

我的前端之路-博客园
我的前端之路-博客园
例子4：函数)
语法：
$selector).afterfunctionindex))
使用functionindex)函数迭代处理jQuery所包含的每个节点，在每个节点的后面依次添加functionindex)函数的返回值。index – 可选。接收选择器的 index 位置。
举例1：

<div id="header"></div>
<div id="middle"><span class="add">hello</span></div>
<div id="footer" class="add"></div>
<script>
$".add").after functionindex, innerHTML){
    return '<strong>你好' + index + 1) + '</strong>';
} );



举例2：

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



insertAfter)方法：将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入
语法：
.insertAfter target)
target
类型: Selector, Element, jQuery
一个选择器，元素，HTML字符串或者jQuery对象，匹配的元素将会被插入在由参数指定的目标后面。
用画图的方法表示
例子1：
代码：

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

我的前端之路-博客园

这种写法：也是可以实现效果的：
$"<div>你好</div>").insertAfter$"#middle "));

注意：下面这种写法是错误的

例2：

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



这种写法也是可以实现效果的：
$document.createTextNode"你好")).insertAfter$"#middle "));
例3：（选择页面上原有的一个元素插入到另一位置）
1)如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。

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



实验了下也可以实现效果：
$"span").insertAfter"#middle ");
（2）追加的内容是当前页面中的某些元素，且有多个目标元素，那么这些元素内容将被复制然后插入到每个目标里面,原位置内容上消失。

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


实验了下也可以实现效果：
$"p").insertAfter".add");

注意：本文为原创，转载请以链接形式标明本文地址 ，谢谢合作。
本文地址：http://www.cnblogs.com/wanghuih/p/5755932.html

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注