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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
