In dit artikel gaan we bespreken hoe je een HTML-element kunt maken via JavaScript. Hier zullen we enkele voorbeelden zien om het gemaakte element in het document in te voegen.
Elementen maken met HTML is niet de enige manier om elementen te maken. Voor de eenvoud maken we echter vaak elementen rechtstreeks in het HTML-document, maar met behulp van JavaScript is het ook mogelijk om elementen te maken.
De document.createElement() wordt gebruikt om via JavaScript dynamisch een HTML-elementknooppunt met de opgegeven naam te maken. Deze methode neemt de naam van het element als parameter en maakt dat elementknooppunt.
Na het maken van een element kunnen we de methode appendChild() of de methode insertBefore() gebruiken om het gemaakte element in het document in te voegen.
Wij kunnen gebruik maken van de verwijderKind() methode om een knooppunt te verwijderen en kan ook de vervangenKind() methode om het knooppunt te vervangen.
Syntaxis
document.createElement(nodename);
Deze methode accepteert een enkele parameterwaarde die als volgt wordt vermeld:
roep de javascript-functie aan vanuit html
knooppuntnaam: Het is de verplichte parameter. Deze parameter is van het tekenreekstype. Het specificeert de naam van het element, die we moeten maken. De elementnaam die in de parameter is opgegeven, maakt het element aan; Anders wordt er een onbekend HTML-element gemaakt als de naam van het opgegeven element niet wordt herkend.
De document.createElement() zal het nieuw gemaakte element retourneren.
Laten we nu enkele voorbeelden bekijken van het gebruik van de document.createElement() methode. Hier laten we twee voorbeelden zien. In het eerste voorbeeld gebruiken we de appendKind() methode om het element in het document in te voegen, en in het tweede voorbeeld gebruiken we de invoegenVoor() methode om een element in te voegen dat is gemaakt door de document.createElement() methode.
Voorbeeld 1
In dit voorbeeld gebruiken we de document.createElement() methode om een nieuw knopelement te maken. We zullen het gemaakte element invoegen met behulp van de appendKind() methode. Hier is er een plezier() methode waarmee een nieuw knopelement wordt gemaakt met behulp van de createElement() methode. We stellen de tekst in met behulp van de innerlijkeHTML dat bovenaan de knop wordt weergegeven.
Laten we het onderstaande voorbeeld bekijken.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button Test het nu Uitvoer
Na de uitvoering van de bovenstaande code zal de uitvoer zijn:
Nadat u op de gegeven knop hebt geklikt, zal de uitvoer zijn:
Voorbeeld2
In dit voorbeeld gebruiken we de document.createElement() methode om een nieuw knopelement te maken. Hier gebruiken we de invoegenVoor() methode om het gemaakte element in te voegen. Er is een div-element met een onderliggend paragraafelement. Het nieuwe knopelement wordt ingevoegd vóór het onderliggende paragraafelement van het div-element.
Laten we het onderstaande voorbeeld bekijken.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button Test het nu Uitvoer
Na de uitvoering van de bovenstaande code zal de uitvoer zijn:
Nadat u op de bovenstaande knop hebt geklikt, is de uitvoer:
De bovenstaande schermafbeelding laat zien dat het nieuwe knopelement vóór het alinea-element wordt ingevoegd. Dit komt omdat we gebruik hebben gemaakt van de insertBeofre() methode voor het invoegen van het nieuwe element dat is gemaakt met behulp van de document.createElement() methode.