Właściwość OuterHTML w JavaScript

Czasami programiści muszą zastąpić kod źródłowy elementu na tekst formowany przez HTML lub uzyskać dostęp do kodu źródłowego elementu w czasie wykonywania. W tym celu użyj właściwości OuterHTML, która jest podobna do elementu.InnerHtml. Główną różnicą między tymi dwoma właściwościami jest to, że InnerHTML uzyskuje dostęp do zwykłej zawartości tekstu bez znaczników HTML, podczas gdy właściwość OuterHTML powinna być używana, jeśli potrzebujesz tagów HTML.

To badanie wyjaśni właściwość OuterHTML w JavaScript.

Jaka jest właściwość OuterHTML w JavaScript?

„„OUSTERHTML”Jest właściwością JavaScript interfejsu DOM, która zapewnia komponent HTML elementu. Wraz z tekstem zawiera również pełną strukturę HTML elementu, w tym jego tagi otwierające i zamykające. Ponadto, używając właściwości OuterHTML, możesz uzyskać dostęp lub zmodyfikować strukturę HTML elementu.

Jak używać właściwości OuterHTML w JavaScript?

Postępuj zgodnie z podaną składnią, aby uzyskać zawartość HTML za pomocą właściwości OuterHTML:

element.OUSTERHTML

Do ustawiania zawartości HTML za pomocą właściwości OuterHTML jest używana następująca składnia: właściwość OuterHTML:

element.euterhtml = htmlString;

Przykład 1: Uzyskaj strukturę HTML za pomocą właściwości OuterHTML

W poniższym przykładzie otrzymamy zawartość elementu za pomocą właściwości OuterHTML. Tutaj najpierw stworzymy „div”Element za pomocą znacznika HTML i przypisz identyfikator„div”, Który zawiera wiele elementów, w tym nagłówek, etykieta i przycisk. Istnieje zdarzenie OnClick dołączone do przycisku, które wywoła zdefiniowaną funkcję o nazwie „getContentByoUterHtml ()„Aby pokazać pełną strukturę elementu HTML:

Witamy w = "Color: Red"> Linuxhint.

To jest najlepsza = "Color: Green"> strona internetowa Aby nauczyć się i wypolerować swoje = "Color: zielony"> umiejętności!


Kliknij tutaj!

Następnie zdefiniuj „getContentByoUterHtml ()„Funkcja, która wywoła„na kliknięcie" wydarzenie. Pokaże zawartość elementu div, w tym wszystkie tagi. W tej funkcji najpierw zdamy „div„Identyfikator pojemnika do„getElementById ()„Metoda jako argument Pokaż zawartość elementu w metodzie alert (), wywołując właściwość OuterHTML:

funkcja getContentByoUterHtml ()
var getCont = Document.getElementById („div”);
alert („zewnętrzny html: \ n” + getCont.euterhtml);

Wyjście pokazuje pełną strukturę elementu, w tym jego elementy dziecięce:

Przykład 2: Ustaw i uzyskaj strukturę HTML za pomocą właściwości OuterHTML

W tym przykładzie ustawimy niektóre treści w DOM za pomocą właściwości JavaScript OuterHTML, a następnie otrzymamy pełną strukturę określonego elementu.

Tutaj utworzymy dwa przyciski, jeden to „Ustawić!„To wywoła„setoutterhtml ()”Funkcja na„na kliknięcie”Wydarzenie i ustawia trochę treści na DOM, a drugi przycisk to„Dostawać„To otrzyma pełną strukturę elementu, wyzwalając„getContentByoUterHtml ()”Funkcja:

Ustaw i zdobądź treść jako zewnętrzny:

Ustawić!
Dostawać

W pliku JavaScript zdefiniuj dwie funkcje, „setoutterhtml ()”I„ „getContentByoUterHtml ()". W funkcji setoutterhtml () ustaw treść za pomocą

znacznik za pomocą Set Składnia właściwości OuterHTML jako elementu dziecięcego elementu:

funkcja setoutterhtml ()
var setCont = dokument.getElementById („set”);
setCont.euterhtml = "

To najlepsza strona internetowa do nauki i wypolerowania swoich umiejętności!

";

Następnie, w funkcji GetContentByoUterHtml (), uzyskaj pełną strukturę elementu za pomocą składni właściwości GET OUTERHTML:

funkcja getContentByoUterHtml ()
var getCont = Document.getElementById („div”);
Alert (getCont.euterhtml);

Wyjście

Omówiliśmy wszystkie podstawowe informacje o właściwości JavaScript OuterHTML.

Wniosek

„„OUSTERHTML”Jest właściwością JavaScript interfejsu DOM, która zapewnia pełną strukturę HTML elementu, w tym jego znaczniki otwierające i zamykające. Jest podobny do właściwości InnerHTML, ale różnica między nimi polega na tym, że InnerHTML uzyskuje dostęp do zwykłej zawartości tekstu bez tagów HTML, podczas gdy właściwość OuterHTML jest zadowolona z tagów HTML. W tym badaniu wyjaśniliśmy właściwość OuterHTML w JavaScript.