Document.createElement() wird zum Erstellen eines Elementknotens verwendet. Im HTML-Dokument wird ein bestimmtes HTML-Element erstellt. Mit anderen Worten: Es wird eine Instanz eines Elements für das angegebene Tag erstellt. In document.createElement() erstellt das Element die Elementschnittstelle, sobald es erstellt wird. Um eine Textschaltfläche zu erstellen, wird ein Textknoten erstellt. document.createElement( ) wird von fast allen Browsern wie Internet Explorer, Firefox, Opera, Google Chrome und Safari usw. unterstützt.
Document.createElement-Syntax
var element=document.createElement(tagName);
Dabei ist „element“ das erstellte Elementobjekt und „tagName“ eine Zeichenfolge, die den Typ des zu erstellenden Elements angibt.
Document.createElement-Beispiel
Das folgende Beispiel zeigt die Verwendung der Methode document.createElement():
<!DOCTYPE html>
<head>
<title>Insert title here</title>
</head>
<body>
<button onclick="myExample()">Click Here</button>
<script type="text/javascript">
function myExample() {
var myButton = document.createElement("Button");
var a = document.createTextNode("Hello")
myButton.appendChild(a);
document.body.appendChild(myButton);
}
</script>
</body>
</html>
- Das -Tag erstellt eine Schaltfläche namens „Click Here“ und verwendet die Funktion onclick(), die ein Klickereignis für die Schaltfläche ausführt.
- var myButton = document.createElement(“Button”);line erstellt eine Instanz des Elements für das angegebene Tag mit der Methode document.createElement().
- Die Zeile var a = document.createTextNode(„Hallo“) erstellt einen Textknoten mit dem angegebenen Text.
- myButton.appendChild(a); Zeile fügt einen neuen untergeordneten Knoten des angegebenen Elementknotens hinzu.
Document.createElement-Demo
- Speichern Sie die Datei als docCreateElement.html in Ihrem System.
- Öffnen Sie einfach die Datei im Browser. Sie sehen das folgende Bild im Browser.
Wenn der Ausführungsprozess erfolgreich abgeschlossen ist, erhalten wir die folgende Ausgabe:
Klicken Sie nun auf die Schaltfläche „hier klicken“ und Sie werden sehen, wie im Bildschirm unten ein neues Element erstellt wird.
