ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery を使用して要素を動的に作成し、ノードを追加する方法

jQuery を使用して要素を動的に作成し、ノードを追加する方法

高洛峰
リリース: 2016-12-09 15:28:48
オリジナル
1405 人が閲覧しました

js で要素を動的に作成するには 3 つの方法があることがわかっています。要素は jQuery でも動的に作成できます

例:

1

2

var str = $("<a href=&#39;http://www.jb51.net&#39;>脚本之家</a>");

$("ul").append(str); //将动态创建的str元素追加到ul下面

ログイン後にコピー

ノードを追加する

js でノードを追加するメソッドは、appendChild (node 要素) です。そして insertBefor (node 要素) 、position)、jQuery では、親要素の最後の子ノードの後に​​追加される

append 親要素の最初の子ノードの前に挿入される prepend

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

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title></title>

 <style>

  div {

   width: 200px;

   height: 100px;

   border: 1px solid red;

  }

 </style>

  

 <script src="jquery-1.12.2.js"></script>

 <script>

  $(function () {

   //注意:如果传进来的jQuery对象是页面中存在的元素,它会这个对象剪切,

   // 所以我们会发现点击后,最下面的p标签被剪切了

   var p1 = $("p");

   $("#btn1").click(function () {

    $("div").append(p1);

   });

   $("#btn2").click(function () {

    $("div").prepend(p1);

   });

   $("#btn3").click(function () {

    $("div").after(p1);

   });

   $("#btn4").click(function () {

    $("div").before(p1);

   });

  });

 </script>

</head>

<body>

<input type="button" id="btn1" value="btnAppend"/>

<input type="button" id="btn2" value="btnPrepend"/>

<input type="button" id="btn3" value="btnAfter"/>

<input type="button" id="btn4" value="btnBefore"/>

<div>div标签1</div>

<p>我要插队。。。</p>

</body>

</html>

ログイン後にコピー

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
jQueryファイルをインポートする
から 1970-01-01 08:00:00
0
0
0
jQueryのプロトタイプチェーン
から 1970-01-01 08:00:00
0
0
0
Nuxt.js に jQuery をインストールする手順
から 1970-01-01 08:00:00
0
0
0
php+jqueryの問題
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート