Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Proprietățile DOM innerHTML și outerHTML vă permit să citiți și să scrieți conținut pe o pagină web. Le puteți folosi pentru a prelua markup sau pentru a-i face modificări, iar cele două sunt similare în multe privințe. Dar există o diferență semnificativă.

Când lucrați cu DOM, veți folosi innerHTML și outerHTML destul de diferit. Aflați cum să utilizați aceste două proprietăți cu exemple practice.

Ce este HTML interior?

Proprietatea innerHTML face parte din DOM și îl puteți accesa prin JavaScript. Îl puteți folosi pentru a obține sau a seta conținutul unui element. Acest conținut exclude eticheta proprie a elementului și include doar marcajul care reprezintă copiii elementului, sub forma unui șir.

Luați în considerare acest exemplu de cod:

<html>
<corp>
<pid="myP">Sunt un paragraf.p>


<scenariu>
document.getElementById("myP").innerHTML = "Salut Lume";
scenariu>
corp>


html>
instagram viewer

În browser, veți vedea un paragraf standard cu textul de înlocuire, astfel:

Proprietatea innerHTML selectează și modifică conținutul fișieruluielement din acest exemplu.

Ce este HTML extern?

Proprietatea outerHTML este ca innerHTML în multe privințe. Îl puteți folosi pentru a obține sau a seta conținutul unui element selectat. Totuși, stabilește și marcajul reprezentând elementul în sine. Aceasta include eticheta de deschidere, orice proprietăți și, acolo unde este relevant, eticheta de închidere.

Revizuiți exemplul anterior pentru a vedea cum diferă outerHTML:

<html>
<corp>
<pid="myP">Sunt un paragraf.p>


<scenariu>
document.getElementById("myP").outerHTML = "
Acest H1 a înlocuit un paragraf.
"
scenariu>
corp>
html>

În browserul dvs., ar trebui să vedeți ceva de genul acesta:

În acest exemplu, proprietatea outerHTML modifică p element într-un h1 element.

Aflați diferența și când să utilizați aceste proprietăți

Proprietățile DOM innerHTML și outerHTML au multe asemănări, dar o diferență cheie. Proprietatea innerHTML captează conținutul HTML al unui element. În schimb, proprietatea outerHTML captează codul HTML care reprezintă elementul în sine și conținutul acestuia.

Puteți utiliza aceste proprietăți pentru a citi și scrie conținut HTML prin DOM. DOM-ul va fi un concept comun și important pe tot parcursul procesului de dezvoltare JavaScript.