Heim > Artikel > Web-Frontend > So verwenden Sie JS zum dynamischen Hinzufügen von HTML-Tags
Dieses Mal zeige ich Ihnen, wie Sie JS zum dynamischen Hinzufügen von HTML-Tags verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von JS zum dynamischen Hinzufügen von HTML-Tags?
1 Einführung
Das dynamische Hinzufügen eines HTML-Tags kann mit der createElement()
-Methode erreicht werden. Die Methode
CreateElement()
erstellt ein HTML-Tag basierend auf einem angegebenen Typ.
Syntax:
sElement=<a href="http://www.php.cn/code/658.html" target="_blank ">document<code>sElement=<a href="http://www.php.cn/code/658.html" target="_blank">document</a>.createElement(sName)
.createElement(sName)
sElement: Wird verwendet, um ein von dieser Methode zurückgegebenes Objekt zu empfangen.
sName: wird verwendet, um den Typ und die grundlegenden Attribute von HTML-Tags festzulegen.
Zweite Anwendung
Dynamisch ein Textfeld hinzufügen
In diesem Beispiel durch Klicken auf die Schaltfläche „Dynamisch Text hinzufügen“. , Fügen Sie der Seite dynamisch ein Textfeld hinzu.
Drei Codes
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>动态添加HTML标记</title> <script language="javascript"> <!-- function addText() { var txt=document.createElement("input"); txt.type="text"; txt.name="txt"; txt.value="动态添加的文本框"; document.fm1.appendChild(txt); } --> </script> </head> <body> <form name="fm1"> <input type="button" name="btn1" value="动态添加文本框" onclick="addText();" /> </form> </body> </html>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Wie man React-Komponenten höherer Ordnung verwendet
Wie man domänenübergreifende Probleme richtig löst Vue-Projekte
Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS zum dynamischen Hinzufügen von HTML-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!