Jak dodać lub usunąć elementy HTML za pomocą JavaScript
Ten zapis omówi procedury dodawania lub usuwania Elementy HTML Poprzez JavaScript. Wykazamy również metody wykorzystania metod dodawania elementów HTML. Ponadto, przykłady związane z metodami usuwania () i resvechild () do usunięcia elementów HTML zostaną dostarczone. A więc zacznijmy!
Jak dodać elementy HTML za pośrednictwem JavaScript za pomocą metody appendChild ()
Metoda JavaScript appendChild () jest wykorzystywana do dodawania elementu HTML jako dziecka określonego węzła nadrzędnego. Ta metoda służy do przenoszenia elementów HTML.
Składnia metody appendChild ()
ParentNode.appendchild (childNode);Tutaj ParentNode jest elementem HTML, który chcemy ogłosić jako rodzic, podczas gdy Childnode to nowo utworzony element HTML, który zostanie dodany do węzła nadrzędnego.
Przykład: Jak dodać elementy HTML za pośrednictwem JavaScript za pomocą metody appendChild ()
W tym przykładzie pokażemy, jak korzystać z „appendChild ()”Metoda dodawania elementów HTML przez JavaScript. Przede wszystkim dodamy nagłówek i akapit za pomocą
I
Elementy HTML:
To jest Linuxhint.com
Dodawanie elementów HTML przez JavaScript.
To jest główny akapit.
To jest drugi akapit.
W następnym kroku stworzymy nowy
element "ustęp”, Wykorzystując„createElement ()„Metoda obiektu dokumentu:
Wykonaj powyższy program w swoim ulubionym edytorze kodu lub dowolnej piaskownicy kodowania online; Jednak w tym celu wykorzystamy JSBin:
Jak widać z poniżej podanego wyjścia, dodaje się nowy element HTML o treści tekstowej „To jest nowy węzeł”:
Jak dodać elementy HTML za pomocą JavaScript za pomocą metody insertBefore ()
Jeśli chcesz wstawić element HTML jako węzeł dziecięcy przed określonym węzłem, możesz wywołać „insertBefore ()„Metoda JavaScript.
Składnia metody insertMethod ()
ParentNode.insertBefore (newNode, IsteingNode);Tutaj "newNode”To nowo utworzony element HTML, który chcesz dodać,„IsteingNode”To element, przed którym wstawisz swój element HTML i„ParentNode”Jest elementem HTML, który określiłeś jako węzeł nadrzędny.
Przykład: Jak dodać elementy HTML za pomocą JavaScript za pomocą metody insertBefore ()
W poprzednim przykładzie wykorzystaliśmy metodę Dodawanie nowego elementu HTML jako ostatnie dziecko macierzystego HTML. Możesz jednak również użyć JavaScript „insertBefore ()”Metoda dodania elementu HTML przed określonym elementem. Poniższy przykład nauczyłeś cię użycia „insertBefore ()" metoda.
Po pierwsze, dodamy nagłówek i niektóre akapity w następujący sposób:
To jest Linuxhint.com
Dodawanie elementów HTML przez JavaScript.
To jest główny akapit.
To jest drugi akapit.
Następnie utworzymy nowy element „ustęp„Element HTML, a następnie zdefiniuj dla niego węzeł tekstowy:
Wykonanie powyższego programu doda „ustęp„HTML przed„P1”:
Jak usunąć elementy HTML za pomocą JavaScript za pomocą metody remove ()
JavaScript „usunąć()„Metoda jest stosowana do usunięcia określonego elementu HTML z modelu obiektu Dokument (DOM).
Składnia metody remove ()
węzeł.usunąć()Tutaj, "węzeł”Reprezentuje element HTML, który chcesz usunąć przez JavaScript.
Przykład: Jak usunąć elementy HTML za pomocą JavaScript za pomocą metody remove ()
W poniższym daniu dodaliśmy nagłówkowy element HTML, akapit
oraz element, który obejmuje dwa akapity i jako węzły dziecięce:
To jest Linuxhint.com
Dodawanie elementów HTML przez JavaScript.
To jest główny akapit.
To jest drugi akapit.
Następnie dodamy przycisk i dołączymy „na kliknięcie”Handler zdarzeń. Zgodnie z następującym kodem, kiedy klikniemy „Usuń element”Przycisk wywoła„myFunction ()" metoda:
W "myFunction ()„Metoda, po pierwsze, używamy„dokument.GetElementById„Aby znaleźć element, który chcemy usunąć, określając jego„ID”Następnie wywołamy„usunąć()" metoda:
Poniższe dane wyjściowe oznacza, że „P1„HTML jest usuwany z naszego programu JavaScript z pomocą„usunąć()”Funkcja:
Jak usunąć elementy HTML za pomocą JavaScript za pomocą metody revelakeChild ()
W JavaScript „The„revunchild ()”Jest wykorzystywany do usunięcia określonego węzła HTML dziecka z elementu HTML.
Składnia metody resvechild ()
ParentNode.RevelSchild (ChildNode)W tym przypadku nadrzędny jest elementem HTML, który określliśmy jako „rodzic„Węzeł, a ChildNode to element HTML, który chcemy usunąć z elementu nadrzędnego.
Przykład: Jak usunąć elementy HTML za pomocą JavaScript za pomocą metody removeechild ()
W tym przykładzie postaramy się usunąć element dziecka naszego zdefiniowanego elementu HTML:
To jest Linuxhint.com
Dodawanie elementów HTML przez JavaScript.
To jest główny akapit.
To jest drugi akapit.
Aby usunąć element dziecięcy, przede wszystkim musisz stworzyć „rodzic”Element HTML i określ element HTML działający jako rodzic w kodzie JavaScript. W naszym przypadku dodaliśmy „div1”:
Jak widać, że element dziecięcy elementu HTML jest pomyślnie usuwany:
Wniosek
Aby dodać element HTML w programie JavaScript, możesz użyć metody appendChild () i insertBefore (), podczas gdy do usunięcia dowolnego konkretnego elementu HTML lub węzła HTML dziecięcego są używane zgodnie z wymagania. W tym spisie omówiono, jak dodać lub usunąć elementy HTML za pośrednictwem JavaScript. Wykazaliśmy również metody zastosowania metod dodatku () i insertBefore () do dodawania elementów HTML. Ponadto w tym artykule przedstawiono również przykłady związane z metodami DEVESING () i RevoveeChild () do usunięcia elementów HTML.