Heim > Artikel > Web-Frontend > So erstellen Sie dynamisch Elemente und hängen Knoten mit jQuery an

So erstellen Sie dynamisch Elemente und hängen Knoten mit jQuery an

高洛峰Original: 2016-12-09 15:28:481299Durchsuche

Wir wissen, dass es drei Möglichkeiten gibt, Elemente in js dynamisch zu erstellen.

Zum Beispiel:

var str = $("<a href=&#39;http://www.jb51.net&#39;>脚本之家</a>");
$("ul").append(str); //将动态创建的str元素追加到ul下面

Knoten anhängen

in js Die Methoden zum Anhängen von Knoten sind appendChild (Knotenelement) und insertBefor (Knotenelement, Position). In jQuery wird

append nach dem letzten untergeordneten Knoten des übergeordneten Elements angehängt

prepend eingefügt in den ersten untergeordneten Knoten des übergeordneten Elements

danach wird nach dem Element angehängt, das Geschwisterelement

bevor wird vor dem Element angehängt, das Geschwisterelement

Der folgende Code funktioniert gut. Die Demo hängt Knoten an

<!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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Diskussion über den Unterschied zwischen String() und .toString() in JSNächster Artikel：Eine kurze Diskussion über den Unterschied zwischen String() und .toString() in JS

In Verbindung stehende Artikel

Mehr sehen