HTML DOM Element innerHTML özelliği

tanım ve kullanım

innerHTML Öznitelikleri ayarlamak veya dönmek için elementin HTML içeriğini (iç HTML) dönmek:

daha fazla bilgi için bkz:

innerText özelliği

textContent özelliği

örnek

örnek 1

id="myP" olan elementin HTML içeriğini almak:

let html = document.getElementById("myP").innerHTML;

Kişisel olarak deneyin

örnek 2

id="demo" olan elementin HTML içeriğini değiştirme:

document.getElementById("demo").innerHTML = "I have changed!";

Kişisel olarak deneyin

örnek 3

id="myList" olan <ul> elementinin HTML içeriğini almak:

let html = document.getElementById("myList").innerHTML;

Kişisel olarak deneyin

örnek 4

id="demo" olan <p> elementinin HTML içeriğini silme:

element.innerHTML = "";

Kişisel olarak deneyin

örnek 5

İki elementin HTML içeriğini değiştirme:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

Kişisel olarak deneyin

örnek 6

Elemanın HTML içeriğini tekrarlayın:

element.innerHTML += element.innerHTML;

Kişisel olarak deneyin

Örnek 7

Bağlantının HTML içeriğini ve URL'ini değiştirin:

element.innerHTML = "W3School";
element.href = "";

Kişisel olarak deneyin

Gramer

innerHTML özelliğini döndürün:

element.innerHTML

innerHTML özelliğini ayarlayın:

element.innerHTML = text

Özellik değeri

Değer Açıklama
Dizgi. HTML içeriği.

Dönüş değeri

Tür Açıklama
Dizgi Elemanın HTML içeriği.

innerHTML, innerText ve textContent arasındaki fark

innerText özelliği döner:

Sadece eleman ve tüm alt elemanlarının metin içeriğini döner, CSS gizli metin boşlukları ve etiketler, <script> ve <style> elemanları dışında.

innerHTML özelliği döner:

Elemanın metin içeriği, tüm boşluklar ve iç HTML etiketleri ile birlikte döner.

textContent özelliği döner:

Elemanın ve tüm soy elemanlarının metin içeriği, boşluklar ve CSS gizli metinleri ile birlikte, etiketler olmadan döner.

HTML Örneği

<p id="myP">   Bu element ek boşluk içerir ve <span>bir span elementi</span>.</p>

JavaScript örnekleri

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Kişisel olarak deneyin

Yukarıdaki örnekte:

innerText özelliği döner:

Bu element ek boşluk içerir ve bir span elementi içerir.

innerHTML özelliği döner:

   Bu element ek boşluk içerir ve <span>bir span elementi</span> içerir.

textContent özelliği döner:

   Bu element ek boşluk içerir ve bir span elementi içerir.

Tarayıcı destekler

Tüm tarayıcılar destekler element.innerHTML：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek Destek Destek Destek Destek Destek