Jak utworzyć element HTML za pośrednictwem JavaScript za pomocą CreateElement

HTML to język znaczników, który nadaje strukturę naszym stronom internetowym, podczas gdy JavaScript to język programowania internetowego, który oferuje interaktywność z użytkownikiem. Przeważnie, dla uproszczenia, programiści definiują i tworzą elementy w HTML. Nie jest to jednak jedyny sposób tworzenia elementów, a my możemy również tworzyć elementy za pomocą metody obiektu Dokument JavaScript createElement () Aby nasza strona była bardziej dynamiczna. Z powodu obiektu dokumentu możemy uzyskać dostęp do elementów HTML.

Co to jest CreateElement ()?

createElement () jest wbudowaną metodą obiektu dokumentu, która ma funkcję dynamicznego tworzenia elementu HTML z i zwracania nowo utworzonego elementu HTML.

składnia z createElement () podano poniżej:

var tworzenieElement = dokument.createElement (htmltagName);

createElement () bierze jeden parametr HtmltagName który jest obowiązkowym parametrem ciągu typu i jest to nazwa znacznika elementu HTML.

Należy zauważyć, że createElement () Metoda tworzy jednak element HTML, aby dołączyć element do dokumentu (strona internetowa), musimy użyć appendChild () Lub insertBefore () metody.

Teraz, kiedy wiemy, co createElement () Metoda polega na tym, że spójrzmy na przykład, aby lepiej zrozumieć createElement () metoda.

Przykład 1:

W tym przykładzie utworzymy element przycisku z JavaScript za kliknięciem już istniejącego przycisku.

Najpierw utwórzmy przycisk w HTML, który ma na kliknięcie Załączone do niego zdarzenie.

Magic Button

Ilekroć użytkownik kliknie przycisk, zacznie wykonywać myfunc () funkcjonować. W końcu użyliśmy scenariusz tag i podano źródło (kod.JS) z pliku JavaScript zawierającego myfunc () funkcjonować.

Kod JavaScript podano poniżej:

funkcja myFunc ()
var mybtn = dokument.createElement („przycisk”);
MYBTN.innerHtml = "nowy przycisk";
dokument.ciało.appendchild (myBtn);

W powyższym kodzie, po pierwsze, zainicjowaliśmy myfunc () funkcja, a następnie utworzył element przycisku za pomocą createElement () metoda. Następnie nadać przycisku tytuł, użyliśmy MYBTN.InnerHtml nieruchomość. W końcu przymocowaliśmy przycisk do korpusu naszego HTML za pomocą appendChild () metoda.

Dane wyjściowe podano poniżej:

Widzimy, że za każdym razem, gdy klikamy Magic Button, tworzy nowy przycisk z tytułem „Nowy przycisk”.

Przykład 2:

W tym przykładzie utworzymy H2 znacznik HTML przez JavaScript, a następnie dołącz go do ciała HTML za pomocą insertBefore () metoda.

W tym celu najpierw napiszmy kod HTML:

Wstaw na kierunek nad tym

Magic Button

Reszta kodu jest taka sama jak przykład 1 z wyjątkiem, że teraz utworzyliśmy element div w środku, który utworzyliśmy

tag za pomocą identyfikatora „Para”.

Kod JavaScript podano poniżej:

funkcja myFunc ()
var myContainer = Dokument.getElementById („MyContainer”);
var para = dokument.getElementById („para”);
var myheading = dokument.CreateElement („H2”);
Myheading.innerHtml = "New Heading";
MyContainer.wstawki przed (Myheading, para);

Wewnątrz funkcji najpierw otrzymujemy odniesienie do i

element HTML. Następnie tworzymy

element za pomocą createElement () metoda. Wstawić to przed

element używamy insertBefore () metoda, w której przekazujemy nowo utworzone

tag i

Dane wyjściowe powyższego kodu podano poniżej:

Ilekroć klikamy przycisk magiczny, nowy element H2 jest tworzony przez JavaScript's createElement () metoda.

Wniosek

Obiekt dokumentu daje nam dostęp do elementów HTML, a jedną z wbudowanych metod obiektów dokumentu jest createElement () metoda. createElement () Metoda jest używana do dynamicznego tworzenia elementu HTML poprzez przyjmowanie nazwy znacznika HTML jako jego parametru, a następnie zwracając nowo utworzony element HTML. Aby dołączyć nowo utworzony element HTML do HTML, używamy appendChild () Lub insertBefore () metody.

W tym poście widzieliśmy, jak utworzyć element HTML za pomocą createElement () Metoda w JavaScript.