W tym artykule omówimy, jak utworzyć element HTML za pomocą JavaScript. Tutaj zobaczymy kilka przykładów wstawiania utworzonego elementu do dokumentu.
Tworzenie elementów za pomocą kodu HTML nie jest jedynym sposobem tworzenia elementów. Jednak dla uproszczenia wiele razy tworzymy elementy bezpośrednio w dokumencie HTML, ale przy użyciu JavaScript możliwe jest również tworzenie elementów.
The dokument.createElement() służy do dynamicznego tworzenia węzła elementu HTML o określonej nazwie za pomocą JavaScript. Ta metoda przyjmuje nazwę elementu jako parametr i tworzy ten węzeł elementu.
Po utworzeniu elementu możemy użyć metody appendChild() lub metody wstawBefore(), aby wstawić utworzony element do dokumentu.
Możemy skorzystać z usuń dziecko() metodę usuwania węzła i może również użyć metody zamień dziecko() metoda zastąpienia węzła.
Składnia
document.createElement(nodename);
Ta metoda akceptuje wartość pojedynczego parametru, która jest określona w następujący sposób:
zawiera metodę Java
nazwa węzła: Jest to parametr obowiązkowy. Parametr ten jest typu string. Określa nazwę elementu, który mamy stworzyć. Nazwa elementu określona w parametrze utworzy element; w przeciwnym razie, jeśli nazwa określonego elementu nie zostanie rozpoznana, zostanie utworzony nieznany element HTML.
The dokument.createElement() zwróci nowo utworzony element.
Zobaczmy teraz kilka przykładów użycia dokument.createElement() metoda. Tutaj pokażemy dwa przykłady. W pierwszym przykładzie użyjemy metody dołączDziecko() metodę wstawienia elementu do dokumentu, a w drugim przykładzie użyjemy metody wstawPrzed() metoda wstawiania elementu utworzonego przez dokument.createElement() metoda.
Przykład 1
W tym przykładzie używamy dokument.createElement() metoda tworzenia nowego elementu przycisku. Utworzony element wstawimy za pomocą dołączDziecko() metoda. Tutaj jest zabawa() metoda, która utworzy nowy element przycisku za pomocą metody utwórz element() metoda. Ustawiamy tekst za pomocą wewnętrznyHTML który zostanie wyświetlony w górnej części przycisku.
Zobaczmy przykład podany poniżej.
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 Przetestuj teraz Wyjście
Po wykonaniu powyższego kodu wyjściem będzie -
Po kliknięciu danego przycisku wyjściem będzie -
Przykład2
W tym przykładzie używamy dokument.createElement() metoda tworzenia nowego elementu przycisku. Tutaj używamy wstawPrzed() metoda wstawienia utworzonego elementu. Istnieje element div, który ma element potomny akapitu. Nowy element przycisku zostanie wstawiony przed elementem potomnym akapitu elementu div.
Zobaczmy przykład podany poniżej.
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 Przetestuj teraz Wyjście
Po wykonaniu powyższego kodu wyjściem będzie -
Po kliknięciu powyższego przycisku dane wyjściowe będą -
Powyższy zrzut ekranu pokazuje, że nowy element przycisku jest wstawiany przed elementem akapitu. Dzieje się tak dlatego, że użyliśmy wstawBeofre() metoda wstawiania nowego elementu utworzonego przy użyciu metody dokument.createElement() metoda.