JavaScript dołącz dane do Div

Podczas utrzymania strony internetowej lub strony internetowej są sytuacje, w których od czasu do czasu wymaga aktualizacji. W takim przypadku istnieje potrzeba dołączenia niektórych danych na określonym wejściu od użytkowników w celu tworzenia i utrzymania rekordów. Oprócz tego dołączenie danych do DIV jest również bardzo pomocne w integracji HTML z JavaScript w celu zastosowania dodatkowych funkcji.

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.InnerHtml

W 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:

Kliknij, aby dołączyć dane

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

Kliknij, aby dołączyć dane

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:

Kliknij, aby dołączyć dane

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.