2019-09-19

jquery实现动态添加html代码

阅读目录

一.html()方法
二.prepend()方法-内部插入
三.prepend()方法2-内部插入
四.prependTo()方法-内部插入
五.append ()方法-内部插入
六.appendTo方法-内部插入
七.before()方法和insertBefore()方法-外部插入
八.after方法和insertAfter()方法-外部插入

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

image

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

一.html()方法

html函数的作用原理首先是移除目标元素内部的html代码，然后将新代码添加到目标元素。
第一段代码：

function CommentBubble()
{
    var w1 = '' +
    ' ' +
    '' +
    '' +
    ' ' +
    ' ' +
    '' +
    '' +
    ' ' +
    ' ' +
    ' ' +
    ' ' +
    ' ' +
    ' 
 ';
    var w2 = '
  
' +
    ' ' +
    '';
    $.each($(".blog_comment_body"), function(i, t) {
    $(t).html(w1 + $(t).html() + w2);
    });

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

}

使用前

我的前端之路-博客园

使用后：

我的前端之路-博客园

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

我的前端之路-博客园

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

我的前端之路-博客园

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

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

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

第二段代码：

window.onload = function () {
$('#div_digg').prepend('关注一下楼主吧 '); 
}

我的前端之路-博客园

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

我的前端之路-博客园

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

我的前端之路-博客园

例子2：（DOM Element ）
用画图来表示下
代码：

我的前端之路-博客园

例子3：（jquery对象）
初始

我的前端之路-博客园

我的前端之路-博客园

加入代码：
$("#header").prepend($("#middle"));

我的前端之路-博客园

我的前端之路-博客园

具体解释可以看下面的拓展2的讲解。
例子4：（函数）
使用匿名函数向指定元素内部的前面插入节点
语法:
$(selector).prepend(function(index,html))
第一个参数就是当前元素在匹配元素中的索引，第二个参数就是该元素当前的内部html内容(innerHTML)。函数的返回值就是需要为该元素追加的内容(可以是html字符串、DOM元素、jQuery对象)。
注意：只有第一个参数可以为自定义函数，用于遍历执行。如果之后的参数也为函数，则调用其toString()方法，将其转为字符串，并视为html内容。
举例1：

 
header

middle

footer

image

image

image

举例2:

 
header

middle

footer

image

image

image

拓展：
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对象，只需要用 $() 把 D O M 对象包装起来，就可以获得一个 j Q u e r y 对象了。$ (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
看个例子：

我的前端之路-博客园

我的前端之路-博客园

例子2：

我的前端之路-博客园

我的前端之路-博客园

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


你好

我的前端之路-博客园

我的前端之路-博客园

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


hello

我的前端之路-博客园

我的前端之路-博客园

（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）
例子：


hello

我的前端之路-博客园

我的前端之路-博客园

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

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

第三段代码

{
    var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h4,只需要将这里的h4换掉即可
    if(jquery_h3_list.length>0)//如果你的章节标题h3存在,追加代码创建目录。
    {
        var content = '';
        content    += '';
        content    += '阅读目录';
        content    += '';
        for(var i =0;i';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '' + $(jquery_h3_list[i]).text() + '';
            content += li_content;
        }
        content    += '';
        content    += '

header middle footer

1. 2. 3.

function CreateDom() { var select = $("").css({ "width": "150px", "border": "1px lightgrey solid" }).appendTo($("body")); var checkbox = $("").appendTo($("body")); var ul = $("< ul/>").appendTo($("body")); var li = $("li1").appendTo(ul); var li = $("li2").appendTo(ul); }