Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

DOM свойствата innerHTML и outerHTML ви позволяват да четете и пишете съдържание на уеб страница. Можете да ги използвате, за да извлечете маркировка или да направите промени в нея, и двете са сходни по много начини. Но има съществена разлика.

Когато работите с DOM, ще използвате innerHTML и outerHTML по съвсем различен начин. Разберете как да използвате тези две свойства с практически примери.

Какво е вътрешен HTML?

Свойството innerHTML е част от DOM и можете да получите достъп до него чрез JavaScript. Можете да го използвате, за да получите или зададете съдържанието на елемент. Това съдържание изключва собствения етикет на елемента и включва само маркирането, което представлява дъщерните елементи на елемента под формата на низ.

Разгледайте този примерен код:

<html>
<тяло>
<стрдокумент за самоличност="myP">Аз съм параграф.стр>


<сценарий>
документ.getElementById("myP").innerHTML = "Здравей свят";
сценарий>
тяло>


html>
instagram viewer

В браузъра си ще видите стандартен абзац със заместващия текст, така:

Свойството innerHTML избира и променя съдържанието наелемент в този пример.

Какво е външен HTML?

Свойството outerHTML е като innerHTML по много начини. Можете да го използвате, за да получите или зададете съдържанието на избран елемент. Въпреки това, той също задава маркирането, представляващо самия елемент. Това включва отварящия таг, всички свойства и, където е приложимо, затварящия таг.

Прегледайте предишния пример, за да видите как се различава външният HTML:

<html>
<тяло>
<стрдокумент за самоличност="myP">Аз съм параграф.стр>


<сценарий>
документ.getElementById("myP").outerHTML = "
Този H1 замени параграф.
"
сценарий>
тяло>
html>

Във вашия браузър трябва да видите нещо подобно:

В този пример свойството outerHTML променя стр елемент в an h1 елемент.

Знайте разликата и кога да използвате тези свойства

DOM свойствата innerHTML и outerHTML имат много прилики, но една ключова разлика. Свойството innerHTML улавя HTML съдържанието на даден елемент. За разлика от това, свойството outerHTML улавя HTML, който представлява самия елемент и неговото съдържание.

Можете да използвате тези свойства, за да четете и пишете HTML съдържание чрез DOM. DOM ще бъде обща, важна концепция през целия ви процес на разработка на JavaScript.