Heim  >  Artikel  >  Web-Frontend  >  Implementierungsmethode zur dynamischen Erstellung von Javascript-Elementen_Javascript-Fähigkeiten

Implementierungsmethode zur dynamischen Erstellung von Javascript-Elementen_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:59:251008Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode der dynamischen Erstellung von Javascript-Elementen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

document.write kann nur dynamisch beim Laden der Seite erstellt werden

Sie können die createElement-Methode des Dokuments aufrufen, um ein DOM-Objekt mit dem angegebenen Tag zu erstellen, und dann das
hinzufügen, indem Sie die appendChild-Methode des Elements aufrufen. Das neu erstellte Element wird unter dem entsprechenden Element

hinzugefügt

Zum Beispiel:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Dom动态创建元素</title>
 <script type="text/javascript">
 function CreateButton() {
  var div = document.getElementById("divMain");
  var myButton = document.createElement("input");
  myButton.type = "button";
  myButton.value = "我是动态添加的";
  //myButton.id="btn"; 注意:如果设置id的话要避免重复
  div.appendChild(myButton); //添加到div上
 }
 </script>
</head>
<body>
 <div id="divMain"></div>
 <input type="button" value="添加元素" onclick="CreateButton()" />
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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