I den här artikeln kommer vi att diskutera hur man skapar ett HTML-element via JavaScript. Här kommer vi att se några exempel för att infoga det skapade elementet i dokumentet.
Att skapa element med HTML är inte det enda sättet att skapa element. Men för enkelhets skull skapar vi många gånger element direkt i HTML-dokumentet, men med hjälp av JavaScript är det också möjligt att skapa element.
De document.createElement() används för att dynamiskt skapa en HTML-elementnod med det angivna namnet via JavaScript. Den här metoden tar namnet på elementet som parameter och skapar elementnoden.
Efter skapandet av ett element kan vi antingen använda metoden appendChild() eller metoden insertBefore() för att infoga det skapade elementet i dokumentet.
Vi kan använda removeChild() metod för att ta bort en nod och kan också använda replaceChild() metod för att ersätta noden.
Syntax
document.createElement(nodename);
Denna metod accepterar ett enda parametervärde som anges enligt följande:
konvertera ett java-objekt till json
nodnamn: Det är den obligatoriska parametern. Denna parameter är av strängtyp. Det specificerar elementets namn, som vi måste skapa. Elementnamnet som anges i parametern kommer att skapa elementet; Annars, om det angivna elementets namn inte känns igen, kommer ett okänt HTML-element att skapas.
De document.createElement() returnerar det nyskapade elementet.
Låt oss nu se några exempel på hur du använder document.createElement() metod. Här kommer vi att visa två exempel. I det första exemplet kommer vi att använda appendChild() metod för att infoga elementet i dokumentet, och i det andra exemplet kommer vi att använda insertBefore() metod för att infoga ett element skapat av document.createElement() metod.
Exempel1
I det här exemplet använder vi document.createElement() metod för att skapa ett nytt knappelement. Vi kommer att infoga det skapade elementet med hjälp av appendChild() metod. Här finns en roligt() metod som skapar ett nytt knappelement med hjälp av createElement() metod. Vi ställer in texten med hjälp av innerHTML som kommer att visas överst på knappen.
Låt oss se exemplet nedan.
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 Testa det nu Produktion
Efter exekvering av ovanstående kod kommer utgången att vara -
Efter att ha klickat på den givna knappen kommer utgången att vara -
Exempel 2
I det här exemplet använder vi document.createElement() metod för att skapa ett nytt knappelement. Här använder vi insertBefore() metod för att infoga det skapade elementet. Det finns ett div-element som har ett underordnat paragrafelement. Det nya knappelementet kommer att infogas före det underordnade paragrafelementet i div-elementet.
Låt oss se exemplet nedan.
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 Testa det nu Produktion
Efter exekvering av ovanstående kod kommer utgången att vara -
Efter att ha klickat på knappen ovan kommer utgången att vara -
Ovanstående skärmdump visar att det nya knappelementet infogas före styckeelementet. Detta beror på att vi har använt insertBeofre() metod för att infoga det nya elementet som skapats med hjälp av document.createElement() metod.