Jak dodać identyfikator do elementu za pomocą JavaScript

W JavaScript „The„ID„Atrybut jest znaczący, ponieważ identyfikuje określony element, który można znaleźć za pomocą„getElementById ()" metoda. Identyfikator na stronie HTML musi być unikalny, ponieważ jest używany później do uzyskania dostępu do wartości elementu HTML i powiązanej treści.

Ten post opisuje procedurę dodawania identyfikatora do elementu w JavaScript.

Jak dodać identyfikator do elementu za pomocą JavaScript?

Aby dodać identyfikator do elementu, „setAttribute ()„Zastosowana jest metoda. Wymaga dwóch parametrów, „nazwa”Atrybutu jest pierwszym parametrem, na przykład„ID”, A jego wartość jest drugim parametrem, na przykład„ABC".

Składnia

Podany identyfikator składni zastosowany dla metody setAttribute ():

element.setAttribute („id”, „wartość”)

Istnieją dwa sposoby dodania identyfikatora do elementu w JavaScript:

• Dodaj identyfikator, tworząc nowy element za pomocą JavaScript
• Dodaj identyfikator do istniejącego elementu HTML w JavaScript

Dane przykłady pokażą oba sposoby jeden po drugim!

Przykład 1: Dodaj identyfikator, tworząc nowy element w JavaScript za pomocą metody setAttribute ()

W tym przykładzie utworzymy nagłówek HTML przez JavaScript i ustawym jego identyfikator i wewnętrzny tekst dla elementu DOM.

W pliku JavaScript utwórz element HTML „H3" używając "createElement ()" metoda:

const Element = dokument.CreateElement („H3”);

Ustaw unikalny identyfikator na nagłówku za pomocą „setAttribute ()" metoda:

element.setAttribute („id”, „nagłówek”);

Tutaj metoda przyjmuje dwa argumenty:

• „„ID”To pierwszy argument, który jest nazwą atrybutu.
• „„nagłówek”Jest wartością identyfikatora jako drugiego atrybutu.

Uzyskaj odniesienie do znacznika ciała HTML za pomocą „QuerySelelect ()" metoda:

var body = dokument.querySelelector („ciało”);

Dodaj nagłówek „H3„Do ciała, używając„appendChild ()„Metoda, przekazując element jako argument:

ciało.appendChild (element);

Teraz ustaw tekst dla elementu, który wyświetli się w DOM za pomocą „getElementsBaTagname ()”Z„InnerHtml" nieruchomość:

dokument.getElementsBaTagname („h3”) [0].innerHtml = "Witamy w Linuxhint!";

Wyjście

Dane wyjściowe oznacza, że ​​nagłówek jest pomyślnie tworzony z jego identyfikatorem ustawionym za pomocą „setAttribute ()" metoda.

Przykład 2: Dodaj identyfikator do istniejącego elementu za pomocą metody setAttribute ()

Spróbujmy dodać nowy identyfikator do istniejącego elementu HTML w JavaScript.

W pliku HTML utwórz nagłówek

oznacz i przypisz do niego identyfikator za pomocą „ID" atrybut:

Witamy w Linuxhint!H3>

Odpowiednie wyjście HTML będzie:

Teraz, w pliku JavaScript, najpierw uzyskaj odniesienie elementu za pomocą jego przypisanego identyfikatora za pomocą „getElementById ()„Metoda i przechowuj w zmiennej”ustaw ID”:

var setid = dokument.getElementById („nagłówek”);

Ustaw nowy identyfikator „Nagłówek 1”Do elementu za pomocą„setAttribute ()" metoda:

ustaw ID.setAttribute („id”, „heading1”);

Wyjście

Powyższe wyjście wskazuje, że identyfikator nagłówka elementu HTML jest teraz „Nagłówek 1”, Który jest ustawiony przez JavaScript„setAttribute ()" metoda.

Wniosek

Aby dodać identyfikator do elementu, użyj JavaScript „setAttribute ()" metoda. Istnieją dwa sposoby dodania identyfikatora do elementu w JavaScript, dodaj identyfikator, tworząc nowy element lub dodać identyfikator do istniejącego elementu HTML w JavaScript. W tym poście opisano procedurę dodawania identyfikatora do elementu w JavaScript.