jquery实现动态添加html代码

2022-11-07 07:57:10

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

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"), function(i, t) {

	$(t).html(w1 + $(t).html() + w2);

	});

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

}

使用前

jquery实现动态添加html代码

使用后：

jquery实现动态添加html代码

知识点

这段代码实际上使用了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

jquery实现动态添加html代码

仔细看一下，发现楼主层的样式与普通楼的不一样，气泡颜色不一样，楼主层有图片头像，普通层没有

仔细查一下，发现，普通层

.list .out .icontd {

display: none

}

这样图片就不会出现.

jquery实现动态添加html代码

jquery实现动态添加html代码

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

二.prepend()方法-内部插入

prepend()函数用于向每个匹配元素内部的起始位置追加指定的内容。

语法：

.prepend(String/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:void(0);" style="font-weight: bold; padding-left:5px;">关注一下楼主吧</a> </div>');

}

jquery实现动态添加html代码

说明：

这主要用来了.prepend()方法

jquery实现动态添加html代码

可以看到，代码被插入到被选元素的开头位置(位于内部）。

用画图来表示下

例子1：（html字符串）

代码：

<div id="header">

</div>

<div id="middle">

</div>

<div id="footer">

</div>

<script>

$("#middle").prepend("<div>你好</div>");

</script>

jquery实现动态添加html代码

例子2：（DOM Element ）

用画图来表示下

代码：

<div id="header">

</div>

<div id="middle">

</div>

<div id="footer">

</div>

<script>

$("#middle").prepend( document.createTextNode("你好"));

</script>

jquery实现动态添加html代码

例子3：（jquery对象）

初始

jquery实现动态添加html代码

jquery实现动态添加html代码

加入代码：

$("#header").prepend($("#middle"));

jquery实现动态添加html代码

jquery实现动态添加html代码

具体解释可以看下面的拓展2的讲解。

例子4：（函数）

使用匿名函数向指定元素内部的前面插入节点

语法:

$(selector).prepend(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").prepend(function(n){

      return "<b>你好 " + n + "</b>";

     });

   });

 });

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

jquery实现动态添加html代码

举例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").prepend(function(i)

    {

        // i代表jQuery对象中正在迭代处理的元素的索引，因此为0、1、2...

        return "<b>书名是《" + books[i].name

            + "》,价格是:" + books[i].price;

    })

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

jquery实现动态添加html代码

拓展：

1. DOM对象与jQuery对象

（1） 什么是jQuery对象？---就是通过jQuery包装DOM对象后产生的对象。

（2）jQuery对象转成DOM对象： **

由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。

1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如： $("#middle")[0]，$("div").eq(1)[0]，$("p")[2]

2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：$("div").get()[6]

（3）DOM对象转成jQuery对象: **

对于已经是一个DOM对象，只需要用\(()把DOM对象包装起来，就可以获得一个jQuery对象了。\)(DOM对象)

如：$(document.getElementById("middle"))

返回的就是jQuery对象，可以使用jQuery的方法。

2.对原有的DOM元素进行移动（若对已在文档中存在的元素使用插入节点的方法则相当于执行“移动节点”的操作

注意：如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。

**重要:

（1） 如果有多个目标元素，内容将被复制然后插入到每个目标里面。

（2）追加的内容是当前页面中的某些元素，且有多个目标元素，那么这些元素内容将被复制然后插入到每个目标里面,原位置内容上消失。

**

例子1：

初始

jquery实现动态添加html代码

jquery实现动态添加html代码

加入代码：

$("#header").prepend($("#middle"));

jquery实现动态添加html代码

jquery实现动态添加html代码

例子2：

初始

jquery实现动态添加html代码

jquery实现动态添加html代码

加入代码

$("#header").prepend($("#middle"), $("#footer"));

jquery实现动态添加html代码

jquery实现动态添加html代码

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.appendChild(t);//把你好添加到div标记中   appendChild:添加子标记

	document.body.appendChild(d); //默认添加在文档的最后。

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

例子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.appendChild(t);//把你好添加到div标记中   appendChild:添加子标记

	document.getElementById("middle").appendChild(d); //把div标记添加到id是middle的标签中

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

（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").appendChild(a);

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

（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").appendChild(t);

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

（4）element.appendChild()

添加一个节点到指定的节点的子节点数组中，读起来好象有点拗口，简单地说就是将元素添加到指定的节点中

appendChild用法:

target.appendChild(newChild)

newChild作为target的子节点插入最后的一子节点之后

var d=document.createElement("div");//createElement：创建一个HTML标记

	var t=document.createTextNode("你好");//添加内容 createTextNode

	d.appendChild(t);//把你好添加到div标记中   appendChild:添加子标记

（5）element.insertBefore()

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

insertBefore调用方法

parentElement.insertBefore(newElement,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.appendChild(b);

var c = document.getElementById("middle");

c.parentNode.insertBefore(a,c);

/*

parentElement.insertBefore( newElement  ,  targetElement );

从上面语法可以看出， 父元素， 新元素，目标元素 是 insertBefore使用的3要素。

其实我们可以不管  父元素， 因为 父元素我们 可以用 目标元素.parentNode 得到。

那么insertBefore就很好用了。只要给2个参数 ： 新元素 和目标元素。

*/

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

（6）在元素后面插入一个新元素（DOM没有提供方法：并没有.insertAfter()）

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

第三段代码

{

    var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h4,只需要将这里的h4换掉即可

    if(jquery_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>';

        for(var 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]).before(go_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]).prepend(content);

        }

    }

}

GenerateContentList();

jquery实现动态添加html代码

jquery实现动态添加html代码

我们来继续分析下

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>';

这段主要对应的是

jquery实现动态添加html代码

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

for(var 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]).before(go_to_top);

            var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';

            content += li_content;

        }

jquery实现动态添加html代码

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

四.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的起始位置.

jquery实现动态添加html代码

用画图的方法表示：

例子1：

<div id="header"></div>

<div id="middle">hello</div>

<div id="footer" ></div>

<script>

$("<div>你好</div>").prependTo("#middle");

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

这种写法：也是可以实现效果的：

$("<div>你好</div>").prependTo($("#middle"));

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

jquery实现动态添加html代码

例2：

<div id="header"></div>

<div id="middle">hello</div>

<div id="footer"></div>

<script>

$(document.createTextNode("你好")).prependTo("#middle");

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

这种写法：也是可以实现效果的：

$( 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>

jquery实现动态添加html代码

jquery实现动态添加html代码

实验了下也可以实现效果：

$("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>

jquery实现动态添加html代码

jquery实现动态添加html代码

实验了下也可以实现效果：

$("p").prependTo(".add");

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

语法：

.append(String/Element/jQuery)

指定的内容可以是：html字符串、DOM元素(或数组)、jQuery对象、函数(返回值)。

注意：插入每个匹配元素里面的末尾（在内部）

例：

$('body').append('<a href="#" id="toTop" style="bottom: 77px; "></a>');

jquery实现动态添加html代码

例子1：( html字符串)

用画图的方法表示

代码：

<div id="header"></div>

<div id="middle"></div>

<div id="footer"></div>

<script>

$("#middle").append("<div>你好</div>");`

</script>

jquery实现动态添加html代码

例子2：(DOM元素)

用画图的方法表示

代码：

<div id="header"></div>

<div id="middle"><p>hello</p></div>

<div id="footer"></div>

<script>

$("#middle").append(document.createTextNode("你好"));

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

例子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>

jquery实现动态添加html代码

jquery实现动态添加html代码

（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>

jquery实现动态添加html代码

jquery实现动态添加html代码

例四：（函数）

语法

$(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>

jquery实现动态添加html代码

jquery实现动态添加html代码

jquery实现动态添加html代码

举例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>

jquery实现动态添加html代码

jquery实现动态添加html代码

jquery实现动态添加html代码

六.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的结尾部分.

jquery实现动态添加html代码

例子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);

}

jquery实现动态添加html代码

用画图的方法表示：

例子1：

代码：

<div id="header"></div>

<div id="middle"></div>

<div id="footer" ></div>

<script>

$("<div>你好</div>").appendTo("#middle");

</script>

jquery实现动态添加html代码

**

这种写法：也是可以实现效果的：**

$("<div>你好</div>").appendTo($("#middle"));

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

jquery实现动态添加html代码

例2：

<div id="header"></div>

<div id="middle">hello</div>

<div id="footer"></div>

<script>

$(document.createTextNode("你好")).appendTo("#middle");

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

这种写法：也是可以实现效果的：

$( 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>

jquery实现动态添加html代码

jquery实现动态添加html代码

实验了下也可以实现效果：

$("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>

jquery实现动态添加html代码

jquery实现动态添加html代码

实验了下也可以实现效果：

$("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

七.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);

jquery实现动态添加html代码

jquery实现动态添加html代码

可以看出追加的代码在jquery_h3_list[i]元素代码的前面，与他是兄弟关系。

例子1：（html字符串）

用画图的方法表示

代码：

<div id="header"></div>

<div id="middle"></div>

<div id="footer"></div>

<script>

$('#middle').before('<div>你好</div>');

</script>

jquery实现动态添加html代码

例子2：（DOM元素）

用画图来表示下

代码：

<div id="header"></div>

<div id="middle">hello</div>

<div id="footer"></div>

<script>

$('#middle').before(document.createTextNode("你好"));

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

例子3：（jQuery对象）

注意：

(1)如果追加的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简而言之，这是一个移动操作,而不是复制操作。

代码：

用画图的方法表示

代码：

<div id="header"></div>

<div id="middle"><p>hello</p></div>

<div id="footer"></div>

<script>

$("#footer").before($("p"));

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

（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>

jquery实现动态添加html代码

jquery实现动态添加html代码

例四：（函数）

语法：

$(selector). before (function(index))

使用function(index)函数迭代处理jQuery所包含的每个节点，在每个节点的前面依次添加function(index)函数的返回值。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").before(function(i)

    {

        // i代表jQuery对象中正在迭代处理的元素的索引，因此为0、1、2...

        return "<b>书名是《" + books[i].name

            + "》,价格是:" + books[i].price;

    })

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

jquery实现动态添加html代码

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 ");

jquery实现动态添加html代码

jquery实现动态添加html代码

这种写法也是可以实现效果的：

$("<div>你好</div>").insertBefore($("#middle "));

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

jquery实现动态添加html代码

例2：

<div id="header"></div>

<div id="middle">hello</div>

<div id="footer"></div>

<script>

$(document.createTextNode("你好")).insertBefore ("#middle ");

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

这种写法：也是可以实现效果的：

$(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>

jquery实现动态添加html代码

jquery实现动态添加html代码

实验了下也可以实现效果：

$("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>

jquery实现动态添加html代码

jquery实现动态添加html代码

实验了下也可以实现效果：

$("p").insertBefore(".add");

八.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>

jquery实现动态添加html代码

jquery实现动态添加html代码

例子2：（DOM元素）

<div id="header"></div>

<div id="middle"><p>hello</p></div>

<div id="footer"></div>

<script>

$("#middle").after(document.createTextNode("你好"));

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

例子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>

jquery实现动态添加html代码

jquery实现动态添加html代码

（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>

jquery实现动态添加html代码

jquery实现动态添加html代码

例子4：(函数)

语法：

$(selector).after(function(index))

使用function(index)函数迭代处理jQuery所包含的每个节点，在每个节点的后面依次添加function(index)函数的返回值。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( function(index, innerHTML){

    return '<strong>你好' + (index + 1) + '</strong>';

} );

jquery实现动态添加html代码

jquery实现动态添加html代码

举例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").after(function(i)

    {

        // i代表jQuery对象中正在迭代处理的元素的索引，因此为0、1、2...

        return "<b>书名是《" + books[i].name

            + "》,价格是:" + books[i].price;

    })

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

jquery实现动态添加html代码

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>

jquery实现动态添加html代码

jquery实现动态添加html代码

这种写法：也是可以实现效果的：

$("<div>你好</div>").insertAfter($("#middle "));

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

jquery实现动态添加html代码

例2：

<div id="header"></div>

<div id="middle">hello</div>

<div id="footer"></div>

<script>

$(document.createTextNode("你好")).insertAfter ("#middle ");

</script>

jquery实现动态添加html代码

jquery实现动态添加html代码

这种写法也是可以实现效果的：

$(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>

jquery实现动态添加html代码

jquery实现动态添加html代码

实验了下也可以实现效果：

$("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>

jquery实现动态添加html代码

jquery实现动态添加html代码

实验了下也可以实现效果：

$("p").insertAfter(".add");

注意：本文为原创，转载请以链接形式标明本文地址 ，谢谢合作。

本文地址：http://www.cnblogs.com/wanghuih/p/5755932.html

上一篇：Delphi/C#之父首次访华：55岁了 每天都写代码


下一篇：工具04_SQL Trace/DBMS_SYSTEM