jQuery动态添加html

在日常 web 开发中，经常遇到需要操作 HTML DOM

今天我们来总结下通过 jQuery 来动态添加 html

首先我们来对这些方法做个总结

方法	说明
html()	设置或返回匹配的元素集合中的 HTML 内容
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容
prependTo()	向目标开头插入匹配元素集合中的每个元素。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容
appendTo()	向目标结尾插入匹配元素集合中的每个元素
before()	在每个匹配的元素之前插入内容
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面
after()	在匹配的元素之后插入内容
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面

01、html()

html() 函数的作用原理是先移除匹配元素内部的html代码，然后将新的html添加到匹配元素

设置内容

当使用该方法返回一个值时，它会返回第一个匹配元素的内容

语法： $(selector).html();

示例：

<p>Hello World</p>
<script type="text/javascript"> 
    $("p").html();
</script>

设置元素内容

当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

语法：$(selector).html(content)

示例：

<p>Hello World</p>
<script type="text/javascript"> 
    $("p").html(Hello World 2);
</script>

02、prepend()

prepend() 方法向匹配元素集合中的每个元素开头插入由参数指定的内容

语法：$(selector).prepend(content)

示例：

<p>Hello World</p>
<script type="text/javascript"> 
  $("p").prepend("<b>Say:</b>");
</script>

03、prependTo()

prependTo() 方法向目标结尾插入匹配元素集合中的每个元素

语法：$(content).prependTo(selector)

示例：

<p>Hello World</p>
<script type="text/javascript"> 
  $("<b>Say:</b>").prependTo("p");
</script>

prependTo() 实际上就是颠倒的 prepend() 方法

提示：prepend()和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置不同

04、append()

append() 方法向匹配元素集合中的每个元素结尾插入由参数指定的内容

语法：$(selector).append(content)

示例：

<p>Say</p>
<script type="text/javascript"> 
  $("p").append("<b>:Hello World</b>");
</script>

05、appendTo()

appendTo() 方法向目标结尾插入匹配元素集合中的每个元素

语法：$(content).appendTo(selector)

示例：

<p>Say</p>
<script type="text/javascript"> 
  $("<b>:Hello World</b>").prependTo("p");
</script>

提示：append() 和appendTo () 方法执行的任务相同。不同之处在于：内容的位置和选择器

06、before()

before() 方法在每个匹配的元素之前插入内容

语法：$(selector).before(content)

示例:

<p>Say:Hello World 2</p>
<script type="text/javascript"> 
  $("p").before("<p><b>Say:Hello world 1</b></p>");
</script>

07、insertBefore()

insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面

语法：$(content).insertBefore(selector)

示例:

<p>Hello World 2</p>
<script type="text/javascript"> 
  $("<span><b>Say:Hello world 1</b></span>").insertBefore("p");
</script>

注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。

插入已有元素示例：

<p>Hello World</p>
<h1>Hello World 666</h1>
<script type="text/javascript"> 
  $("h1").insertBefore("p");
</script>

08、after()

after() 在匹配的元素之后插入内容

语法：$(selector).after(content)

示例:

<p>Hello World</p>
<script type="text/javascript"> 
  $("p").after("<h1>Hello World 666</h1>");
</script>

09、insertAfter()

insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素

语法：$(content).insertAfter(selector)

示例

<p>Hello World</p>
<script type="text/javascript"> 
  $("<h1>Hello World 666</h1>").insertAfter("p");
</script>

注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

插入已有元素示例：

<p>Hello World</p>
<h1>Hello World 666</h1>
<script type="text/javascript"> 
  $("h1").insertAfter("p");
</script>

总结：

prepend() 、prependTo() 、append() 、appendTo() 为元素内部插入html

before() 、insertBefore() 、after() 、insertAfter()为元素外部插入html