JavaScript dołącz dane do Div
Jak dołączyć dane do Div w JavaScript?
Następujące podejścia można wykorzystać do dołączania danych do DIV w JavaScript:
- "InnerHtml" nieruchomość.
- "insertadjacenthtml ()" metoda.
- "appendChild ()" metoda.
- "JQuery" zbliżać się.
Podejście 1: Dołącz dane do DIV w JavaScript za pomocą właściwości InnerHTML
„„InnerHtml„Właściwość zwraca wewnętrzną zawartość HTML elementu.Takie podejście można zastosować do dołączania danych do dołączonego obrazu i przycisku w „div”Element na przycisku.
Składnia
element.InnerHtmlW podanej składni:
- "element”Odnosi się do elementu, do którego treść HTML zostanie zwrócona.
Przykład
Rzućmy okiem na następujące wiersze kodu:
W powyższym kodzie:
- Określić "div”Element z określonym„ID".
- Następnie dołącz obraz w elemencie DIV.
- Utwórz także przycisk w elemencie DIV o załączonym „na kliknięcie„Przekierowanie zdarzeń do funkcji appendData ().
Przejdź do części kodu JavaScript:
W części JS kodu wykonaj poniższe kroki:
- Deklaruj funkcję o nazwie „appendData ()".
- W swojej definicji uzyskaj dostęp do „div”Element z jego identyfikatora za pomocą„dokument.getElementById ()" metoda.
- Na koniec zastosuj „InnerHtml„Właściwość, aby dołączyć podaną wiadomość wraz z dołączonym obrazem i utworzonym przyciskiem w„div".
Wyjście
W powyższym wyjściu można zaobserwować, że podany komunikat jest dołączany do obrazu na przycisku.
Podejście 2: Dołącz dane do DIV w JavaScript za pomocą metody insertAdJacenthtml ()
„„insertadjacenthtml ()”Metoda wkłada dane HTML do określonej pozycji.Tę metodę można wykorzystać do dołączania danych na końcu „div”Po wybraniu określonej opcji.
Składnia
element.insertadjacenthtml (pozycja, html)W powyższej składni:
- "pozycja”Odnosi się do pozycji w stosunku do elementu.
- "html”Wskazuje na włożenie HTML.
Przykład
Spójrz na następujący fragment kodu:
Czy JavaScript jest językiem programowania?
Tak
NIE
W powyższym kodzie HTML:
- Powtórz omawiane kroki, aby włączyć „div„Element o określonym„ID".
- Dołącz także określone nagłówek w „”Tag.
- Następnie uwzględnij dwa „radio”Przyciski z jednym wywołującym funkcję appendData (). Spowoduje to dołączenie danych tylko po wybraniu opcji „Tak".
Przejdź do części kodu JavaScript:
W powyższym kodzie JS wykonaj następujące kroki:
- Deklaruj funkcję o nazwie „appendData ()".
- W swojej definicji uzyskaj dostęp do „div”Element podobnie za pomocą„dokument.getElementById ()" metoda.
- Na koniec zastosuj „insertadjacenthtml ()„Metoda, określając„pozycja”Jako pierwszy parametr do dołączenia określonych danych. W tym scenariuszu dane zostaną dołączone na końcu.
Wyjście
W powyższym wyjściu widać, że „powodzenie„Wiadomość jest dołączona tylko po kliknięciu opcji”Tak".
Podejście 3: Dołącz dane do DIV w JavaScript za pomocą metody appendChild ()
„„appendChild ()”Metoda dołącza element węzła jako ostatnie dziecko elementu. Takie podejście można wykorzystać do dołączania danych podobnie na końcu na przycisku.
Składnia
element.appendchild (węzeł)W podanej składni:
- "węzeł”Wskazuje, że węzeł do dołączenia.
Dygresja: Dodatkowa metoda „createTextNode ()”Będzie również zastosowany w poniższym przykładzie. Jest po prostu stosowany do utworzenia węzła tekstowego.
Przykład
Śledźmy poniższy przykład poniżej krok po kroku:
JavaScript
W powyższym kodzie HTML:
- Przypomnij o omówionym podejściu do włączenia „div„Element o określonym„ID”I nagłówek.
- Podobnie dołącz przycisk z „na kliknięcie„Załączone zdarzenie, które przekieruje się do funkcji appendData ().
Śledźmy podaną część kodu JavaScript:
W tej części kodu wykonaj następujące kroki:
- Zdefiniuj funkcję o nazwie „appendData ()".
- Podobnie w swojej definicji uzyskują dostęp do „div”Element, jak omówiono.
- W następnym kroku zastosuj „createTextNode ()„Metoda utworzenia określonego węzła tekstowego.
- Na koniec dołącz utworzony węzeł tekstowy na końcu „div".
Wyjście
W wyjściu widać, że wynikowy akapit jest dołączany do „div”Po kliknięciu przycisku.
Podejście 4: Dołącz dane do DIV w JavaScript przy użyciu podejścia JQuery
„„JQuery„Podejście można zastosować w celu uzyskania dostępu do„div”Element bezpośrednio i dołącz do niego nagłówek (Div) na przycisku.
Przykład
Śledźmy poniższy przykład poniżej krok po kroku:
Treść na tej stronie to:
W powyższym kodzie wykonaj poniższe kroki:
- Dołącz bibliotekę jQuery do stosowania jej metod.
- Ożywiaj kroki w celu określenia „div”Element z określonym„ID".
- W „„div”, Obejmują podany nagłówek i„przycisk”Z„na kliknięcie„Wydarzenie wywołujące funkcję appendData ().
Kontynuujmy do części kodu JavaScript:
W powyższej części kodu JS wykonaj następujące kroki:
- Zdefiniuj funkcję o nazwie „appendData ()".
- W swojej definicji uzyskaj dostęp do elementu DIV bezpośrednio przez jego „ID".
- Następnie zastosuj „dodać()„Metoda do dostępu”div”I obejmują w nim podany nagłówek.
Wyjście
W wyjściu przycisk kliknięcia prowadzi do dołączenia wynikającego z tego nagłówka w „div".
Ten zapis wykazał podejścia do dołączania danych do DIV w JavaScript.
Wniosek
„„InnerHtml„Nieruchomość,„insertadjacenthtml ()„Metoda,„appendChild ()”Metoda lub„JQuery„Podejście można zastosować do dołączania danych do DIV w JavaScript. Właściwość InnerHTML można wykorzystać do dołączania danych do dołączonego obrazu i przycisku w „div”Element na przycisku. Metodę insertAdJacenthtml () można zastosować do dołączenia danych w odniesieniu do określonej pozycji jako jej parametru. Metoda appendChild () w połączeniu z „createTextNode ()”Metodę można wykorzystać do utworzenia węzła tekstowego, a następnie dołączyć go do końca Div. Podejście jQuery można użyć do bezpośredniego pobierania elementu DIV i dołączenia nagłówka na przycisk kliknięcia. Ten blog wyjaśnił, aby dołączyć dane do DIV w JavaScript.