添加元素

建立元素经历的过程：

1、建立元素
2、为元素添加文本或属性
3、将元素追加到DOM中
 

添加元素以下几个方法：

 方法  说明
append() 在选择元素的子元素后面追加。由选择的元素调用这个函数，函数中的参数是新元素。
prepend() 在选择元素的子元素前面追加。由选择的元素调用这个函数，函数中的参数是新元素。
after() 在选择元素的后面添加。由选择的元素调用这个函数，函数中的参数是新元素。
before() 在选择元素的后面添加。由选择的元素调用这个函数，函数中的参数是新元素。
appendTo() 将新元素追加到选择元素的子元素后面。由新创建的元素调用这个方法，函数中的参数是选择的元素。
prependTo() 将新元素追加到选择元素的子元素前面。由新创建的元素调用这个方法，函数中的参数是选择的元素。

 

创建元素通常有以下几种方式。

1、采用html创建元素。

1
 var el=  "<p>全面深化改革</p>";

2、使用JavaScript创建元素，要经历两个步骤

1
2
var el=  document.createElement("p");
el.innerHTML="全面深化改革";

3、使用jQuery创建元素

1
var el= $("<p>全面深化改革</p>");

 

append示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>append</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
        </script>
    </head>
    <body>
        <div>
            <ul id="ul">
                <li id="a">鼠标</li>
                <li id="b">键盘</li>
                <li id="c">屏幕</li>
                <li id="d"><a>主机</a></li>
            </ul>
        </div>
        <button>添加元素</button>
        <script>
            $('button').on('click',function(){
                var pel="<p>全面深化改革</p>";
                $('div').append(pel);
            });
        </script>
    </body>
</html>

prepend示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>prepend</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
        </script>
    </head>
    <body>
        <div>
            <ul id="ul">
                
                <li id="a">鼠标</li>
                <li id="b">键盘</li>
                <li id="c">屏幕</li>
                <li id="d"><a>主机</a></li>
        </div>
        <button>添加元素</button>
        <script>
            $('button').on('click',function(){
                var pel="<p>全面深化改革</p>";
                $('div').prepend(pel);
            });
        </script>
    </body>
</html>

after示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>after</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
        </script>
    </head>
    <body>
        <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; min-height: auto !important;">>
            <ul id="ul">
                <li id="a">鼠标</li>
                <li id="b">键盘</li>
                <li id="c">屏幕</li>
                <li id="d"><a>主机</a></li>
            </ul>
        </div>
        <button>添加元素</button>
        <script>
            $('button').on('click',function(){
                var pel="<p>全面深化改革</p>";
                $('div').after(pel);
            });
        </script>
    </body>
</html>

before示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>before</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
        </script>
    </head>
    <body>
        <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; min-height: auto !important;">>
            <ul id="ul">
                <li id="a">鼠标</li>
                <li id="b">键盘</li>
                <li id="c">屏幕</li>
                <li id="d"><a>主机</a></li>
            </ul>
        </div>
        <button>添加元素</button>
        <script>
            $('button').on('click',function(){
                var pel="<p>全面深化改革</p>";
                $('div').before(pel);
            });
        </script>
    </body>
</html>

appendTo示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>appendTo</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
        </script>
    </head>
    <body>
        <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; min-height: auto !important;">>
            <ul id="ul">
                <li id="a">鼠标</li>
                <li id="b">键盘</li>
                <li id="c">屏幕</li>
                <li id="d"><a>主机</a></li>
            </ul>
        </div>
 
        <button>添加元素</button>
        <script>
            $('button').on('click', function () {
                // 必须使用$()创建元素
                $("<p>全面深化改革</p>").appendTo("div");
            });
        </script>
    </body>
</html>

prependTo示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>prependTo</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
        </script>
    </head>
    <body>
        <div style=" font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; padding: 0px !important; background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; min-height: auto !important;">>
            <ul id="ul">
                <li id="a">鼠标</li>
                <li id="b">键盘</li>
                <li id="c">屏幕</li>
                <li id="d"><a>主机</a></li>
            </ul>
        </div>
 
        <button>添加元素</button>
        <script>
            $('button').on('click', function () {
                // 必须使用$()创建元素
                $("<p>全面深化改革</p>").prependTo("div");
            });
        </script>
    </body>
</html>
posted @ 2018-06-07 17:16  麦克斯-侯  阅读(221)  评论(0)  编辑  收藏  举报
百纵科技