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 Worldp>
<script type="text/javascript">
$("p").html();
script>设置元素内容
当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。
语法：$(selector).html(content)
示例：
<p>Hello Worldp>
<script type="text/javascript">
$("p").html(Hello World 2);
script>02、prepend()
prepend() 方法向匹配元素集合中的每个元素开头插入由参数指定的内容
语法：$(selector).prepend(content)
示例：
<p>Hello Worldp>
<script type="text/javascript">
$("p").prepend("Say:");
script>03、prependTo()
prependTo() 方法向目标结尾插入匹配元素集合中的每个元素
语法：$(content).prependTo(selector)
示例：
<p>Hello Worldp>
<script type="text/javascript">
$("Say:").prependTo("p");
script>prependTo() 实际上就是颠倒的 prepend() 方法
提示：prepend()和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置不同
04、append()
append() 方法向匹配元素集合中的每个元素结尾插入由参数指定的内容
语法：$(selector).append(content)
示例：
<p>Sayp>
<script type="text/javascript">
$("p").append(":Hello World");
script>05、appendTo()
appendTo() 方法向目标结尾插入匹配元素集合中的每个元素
语法：$(content).appendTo(selector)
示例：
<p>Sayp>
<script type="text/javascript">
$(":Hello World").prependTo("p");
script>提示：append() 和appendTo () 方法执行的任务相同。不同之处在于：内容的位置和选择器
06、before()
before() 方法在每个匹配的元素之前插入内容
语法：$(selector).before(content)
示例:
<p>Say:Hello World 2p>
<script type="text/javascript">
$("p").before("Say:Hello world 1
");
script>07、insertBefore()
insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面
语法：$(content).insertBefore(selector)
示例:
<p>Hello World 2p>
<script type="text/javascript">
$("Say:Hello world 1").insertBefore("p");
script>注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。
插入已有元素示例：
<p>Hello Worldp>
<h1>Hello World 666h1>
<script type="text/javascript">
$("h1").insertBefore("p");
script>08、after()
after() 在匹配的元素之后插入内容
语法：$(selector).after(content)
示例:
<p>Hello Worldp>
<script type="text/javascript">
$("p").after("Hello World 666
");
script>09、insertAfter()
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素
语法：$(content).insertAfter(selector)
示例
<p>Hello Worldp>
<script type="text/javascript">
$("Hello World 666
").insertAfter("p");
script>注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
插入已有元素示例：
<p>Hello Worldp>
<h1>Hello World 666h1>
<script type="text/javascript">
$("h1").insertAfter("p");
script>总结：
prepend() 、prependTo() 、append() 、appendTo() 为元素内部插入html
before() 、insertBefore() 、after() 、insertAfter()为元素外部插入html