DOM操作
DOM操作是JQ核心内容之一，在前端开发时，我们往往需要在页面某个地方添加一个元素或删除元素，这种添加元素、删除元素的操作就是通过 DOM来实现的。

1. 创建节点：

$(html) 如:$(“<li></li>”)

2.插入节点：

（一）append(content|fn)

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

参数
content： String, Element, jQuery
要追加到目标中的内容

function(index, html)： Function
返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

示例

描述： 向所有段落中追加一些HTML标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>插入节点</title>
</head>
<style>

</style>
<body>
    <p>I would like to say: </p>
    <script>
        $("p").append("<b>Hello</b>");
    </script>
</body>
</html>

结果

I would like to say: Hello

（二）appendTo(content)

概述

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二

参数
content： String
用于被追加的内容

.appendTo()和,appendTo不同之处：
a.内容和选择器的位置，
b.append()能够使用函数来附加内容。

示例

描述： 把所有段落追加到ID值为foo的元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>appendTo</title>
</head>
<body>
    <p>I would like to say: </p>
    <div></div><div></div>
</body>
<script>
    $("p").appendTo("div");
</script>
</html>

结果：

I would like to say:

I would like to say:

代码显示：

<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

描述: 新建段落追加div中并加上一个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>appendTo</title>
</head>
<body>

    <div></div><div></div>
</body>
<script>
    $("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()//返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法
   .addClass("test2");
</script>
</html>

结果

<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

不加end()时

<div><p class="test test2"></p></div>
<div><p class="test test2"></p></div>

（三）prepend(content)

概述
向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

参数
content： String, Element, jQuery
要插入到目标元素内部前端的内容

function(index, html) ： Function
返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

示例

描述:向所有段落中前置一些HTML标记代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>appendTo</title>
</head>
<body>

    <p>I would like to say: </p>
</body>
<script>
   $("p").prepend("<b>Hello</b>");
</script>
</html>

结果：

HelloI would like to say:

代码

 <p><b>Hello</b>I would like to say: </p>

描述: 将一个DOM元素前置入所有段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>prepend</title>
</head>
<body>
    <p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
</body>
<script>
$("p").prepend( $(".foo")[0] );</script>
</html>

结果：

HelloI would like to say:

HelloI would like to say:

Good Bye

代码

<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>

（四）prependTo(content)

概述
把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数
content： String
用于匹配元素的jQuery表达式

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>prependTo</title>
</head>
<body>
   <p>I would like to say: </p><div id="foo"></div>
</body>
<script>
$("p").prependTo("#foo");
</script>
</html>

结果

<div id="foo"><p>I would like to say: </p></div>

（五）before(content|fn)

概述

在每个匹配的元素之前插入内容。

参数
content： String, Element, jQuery
插入到每个目标后的内容

function Function
函数必须返回一个html字符串。

示例

描述:在所有段落之前插入一些HTML标记代码。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>before</title>
</head>
<body>
 <p>I would like to say: </p>
</body>
<script>
$("p").before("<b>Hello</b>");
</script>
</html>

结果:

<b>Hello</b><p>I would like to say: </p>

描述:在所有段落之前插入一个元素。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>before</title>
</head>
<body>
 <p>I would like to say: </p><b id="foo">Hello</b>
</body>
<script>
$("p").before( $("#foo")[0] );
</script>
</html>

结果:

<b id="foo">Hello</b><p>I would like to say: </p>

（六）after(content|fn)

概述
在每个匹配的元素之后插入内容。

参数
content： String, Element, jQuery
插入到每个目标后的内容

function Function
函数必须返回一个html字符串。

示例

描述:在所有段落之后插入一些HTML标记代码。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>before</title>
</head>
<body>
 <p>I would like to say: </p>
</body>
<script>
$("p").after("<b>Hello</b>");
</script>
</html>

结果:

<p>I would like to say: </p> <b>Hello</b>

描述:在所有段落之后插入一个元素。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>before</title>
</head>
<body>
 <b id="foo">Hello</b>
 <p>I would like to say: </p>
</body>
<script>
$("p").after( $("#foo")[0] );
</script>
</html>

结果:

<p>I would like to say: </p>
<b id="foo">Hello</b>

（七）insertBefore(content)

概述
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

参数
content： String
用于匹配元素的jQuery表达式

示例

描述: 把所有段落插入到一个元素之前。与 $(“#foo”).before(“p”)相同。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>insertBefore</title>
</head>
<body>
<div id="foo">Hello</div><p>I would like to say: </p>

</body>
<script>

$("p").insertBefore("#foo");
</script>
</html>

结果:

<p>I would like to say: </p><div id="foo">Hello</div>

（八）insertAfter(content)

概述
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

参数
content： String
用于匹配元素的jQuery表达式

示例

描述: 把所有段落插入到一个元素之后。与 $(“#foo”).after(“p”)相同

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
    <title>insertBefore</title>
</head>
<body>
<p>I would like to say: </p><div id="foo">Hello</div>

</body>
<script>

$("p").insertAfter("#foo");
</script>
</html>

结果:

<div id="foo">Hello</div><p>I would like to say: </p>

jQuery-DOM操作-插入节点

1. 创建节点：

2.插入节点：

（一）append(content|fn)

示例

（二）appendTo(content)

示例

（三）prepend(content)

示例

（四）prependTo(content)

示例

（五）before(content|fn)

示例

（六）after(content|fn)

示例

（七）insertBefore(content)

示例

（八）insertAfter(content)

示例

猜你喜欢