Heim > Artikel > Web-Frontend > Zusammenfassung von Methodenbeispielen zum dynamischen Erstellen von HTML-Tags in Javascript

Zusammenfassung von Methodenbeispielen zum dynamischen Erstellen von HTML-Tags in Javascript

伊谢尔伦Original: 2017-07-27 10:56:521487Durchsuche

HTML-Ereignisattribute

Globale Ereignisattribute: HTML 4 fügt die Möglichkeit hinzu, Ereignisse Aktionen im Browser auslösen zu lassen, z. B. das Starten von JavaScript, wenn der Benutzer auf ein Element klickt .

a. Fensterereignisattribut, für Ereignisse, die durch das Fensterobjekt ausgelöst werden (auf das 6c04bd5ca3fcae76e30b72ad730ca86d-Tag angewendet), ist das häufig verwendete Attribut „onload“.

b. Formularereignis, ein Ereignis, das durch Aktionen innerhalb eines HTML-Formulars ausgelöst wird (wird auf fast alle HTML-Elemente angewendet, wird jedoch am häufigsten in Formularelementen verwendet): Häufig verwendete Ereignisse sind „onblur“, „onfocus“, „onselect“ und „onsubmit“.

c. Tastaturereignis

d. Mausereignis, ein durch Maus oder ähnliche Benutzeraktionen ausgelöstes Ereignis: häufig verwendete Ereignisse sind „onclick“, „onmouseover“ und „onmouseout“.

e. Medienereignis, ein durch Medien ausgelöstes Ereignis (z. B. Video, Bild und Audio) (gilt für alle HTML-Elemente, findet sich jedoch häufig in Medienelementen wie b97864c2e0ef2353a16c4d64c7734e92, d8e2720730be5ddc9c2a3782839e8eb6 , < ;img>, 273238ce9338fbb04bee6997e5552b95 und 39000f942b2545a5315c57fa3276f220).

HTML-Tags dynamisch erstellen

a. Zwei traditionelle Methoden

document.write-Methode und innerHTML-Attribut, keines davon Die Methoden und vom standardisierten DOM (W3C-Standard) unterstützte Attribute sind allesamt exklusive Attribute von HTML.

Mit der Methode document.write können Element-Tags, insbesondere Zeichenfolgen, problemlos eingefügt werden. Dies widerspricht jedoch dem Grundsatz, dass Webdesign Verhalten (Skript) und Struktur (HTML-Tags) trennen sollte.

<!DOCTYPE html>
 <html>
 <head>
 <meta chaset="utf-8" />
 <title>document.write</title>
 <body>
  <script>
  <!--可以很方便的插入元素标签,尤其是字符串.但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则-->
  document.write("<p>This is inserted by document.write</p>");
  </script>
 </body>
 </head>
 </html>

innerHTML eignet sich zum Einfügen eines großen Teils von HTML-Inhalten in eine Webseite, wie zum Beispiel:

<p id="testp">
 </p>
 window.onload = function() {
 var testp = document.getElementById("testp");
 testp.innerHTML = "<p>This is inserted by <em>innerHTML</em></p><en>";
 }

b. Verfeinerte Dom-Methode – Dom-Knotenbaum abrufen und Dom-Knotenbaum ändern

Knoten (Elemente) abrufen: document.getElementById und element.getElementsByTagName

Knoten erstellen (Element): document.createElement, document.createTextNode

Knoten anhängen (Element): element.appendChild

Einfügen (einen Knoten vor einem anderen Knoten einfügen): parentEelement.insertBefore( newElement , targetElement)

Sehr nützliche Attribute: element.parentNode (übergeordneten Knoten abrufen), element.nextSibling (geschwisterlichen Knoten abrufen)

Der Effekt des Einfügens von HTML mithilfe des oben genannten innerHTML-Attributs kann kann weiterhin mit der Dom-Methode verwendet werden. Implementierung:

 window.onload = function() {
  var testp = document.getElementById("testp");
  var para = document.createElement("p");
  testp.appendChild(para);
  var context1 = doument.createTextNode("This is inserted by ");
  para.appendChild(context1);
  var emphasis = document.createElement("em");
  para.appendChild(emphasis);
  var context2 = document.createTextNode("method of domcore");
  emphasis.appendChild(context2);
 }

Verwenden Sie die obige Dom-Methode, um eine Funktion zu schreiben, die einen Knoten in einen anderen Knoten einfügt:

function insertAfter(newElement, targetElement) {
 var parent = targetElement.parentNode;
 if (parent.lastChild == targetElement) {
  parent.appendChild(newElement);
 } else {
  targetElement.inserBefore(newElement, targetElement.nextSibling);
 }
}

Das obige ist der detaillierte Inhalt vonZusammenfassung von Methodenbeispielen zum dynamischen Erstellen von HTML-Tags in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Detaillierte Erläuterung der grundlegenden Musterverwendung und Verbesserungsmethoden der prototypischen Vererbung von JavaScript anhand von BeispielenNächster Artikel：Detaillierte Erläuterung der grundlegenden Musterverwendung und Verbesserungsmethoden der prototypischen Vererbung von JavaScript anhand von Beispielen

In Verbindung stehende Artikel

Mehr sehen