Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Właściwości innerHTML i externalHTML DOM umożliwiają odczytywanie i zapisywanie treści na stronie internetowej. Możesz ich używać do pobierania znaczników lub wprowadzania w nich zmian, a oba są podobne pod wieloma względami. Ale jest znacząca różnica.

Podczas pracy z DOM będziesz używać innerHTML i externalHTML zupełnie inaczej. Dowiedz się, jak korzystać z tych dwóch właściwości na praktycznych przykładach.

Co to jest wewnętrzny kod HTML?

Właściwość innerHTML jest częścią DOM i możesz uzyskać do niego dostęp za pomocą JavaScript. Możesz go użyć do pobrania lub ustawienia zawartości elementu. Ta treść wyklucza własny tag elementu i zawiera tylko znaczniki reprezentujące elementy podrzędne elementu w postaci ciągu znaków.

Rozważ ten przykładowy kod:

<HTML>
<ciało>
<PID=„moje P”>Jestem paragrafem.P>


<scenariusz>
dokument.getElementById(„moje P”).innerHTML = "Witaj świecie";
scenariusz>
ciało>


HTML>
instagram viewer

W przeglądarce zobaczysz standardowy akapit z tekstem zastępczym, na przykład:

Właściwość innerHTML wybiera i zmienia zawartość plikuelement w tym przykładzie.

Co to jest zewnętrzny kod HTML?

Właściwość externalHTML jest pod wieloma względami podobna do innerHTML. Możesz go użyć do pobrania lub ustawienia zawartości wybranego elementu. Jednak ustawia również znaczniki reprezentujące sam element. Obejmuje to znacznik otwierający, wszelkie właściwości oraz — w stosownych przypadkach — znacznik zamykający.

Wróć do poprzedniego przykładu, aby zobaczyć, czym różni się externalHTML:

<HTML>
<ciało>
<PID=„moje P”>Jestem paragrafem.P>


<scenariusz>
dokument.getElementById(„moje P”).outerHTML = "
Ten H1 zastąpił akapit.
"
scenariusz>
ciało>
HTML>

W przeglądarce powinieneś zobaczyć coś takiego:

W tym przykładzie właściwość externalHTML zmienia plik P element w h1 element.

Poznaj różnicę i kiedy używać tych właściwości

Właściwości innerHTML i outsideHTML DOM mają wiele podobieństw, ale jedną kluczową różnicę. Właściwość innerHTML przechwytuje zawartość HTML elementu. Natomiast właściwość externalHTML przechwytuje kod HTML reprezentujący sam element i jego zawartość.

Tych właściwości można używać do odczytywania i zapisywania zawartości HTML za pośrednictwem modelu DOM. DOM będzie powszechnym, ważnym pojęciem w całym procesie programowania JavaScript.