Mfano wa HTML DOM Element innerHTML wa kipengele

Ufafanuzi na matumizi

innerHTML Kupata au kuingiza ujumbe wa HTML wa kipengele (ujumbe wa kipengele kani)

Tazama pia:

Mwili wa ujumbe wa kipengele

Mwili wa ujumbe wa kipengele

Mfano

Mfano 1

Pata ujumbe wa HTML wa kipengele na id="myP"

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

Tenda kwa mwenyewe

Mfano 2

Badilisha ujumbe wa HTML wa kipengele na id="demo"

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

Tenda kwa mwenyewe

Mfano 3

Pata ujumbe wa HTML wa kipengele <ul> na id="myList"

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

Tenda kwa mwenyewe

Mfano 4

Fungua ujumbe wa HTML wa kipengele <p> na id="demo"

element.innerHTML = "";

Tenda kwa mwenyewe

Mfano 5

Badilisha ujumbe wa HTML wa mifano wa tatu

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

Tenda kwa mwenyewe

Mfano 6

Kurudia hali ya HTML ya elementi:

element.innerHTML += element.innerHTML;

Tenda kwa mwenyewe

Mifano 7

Kufanyika kwa hali ya HTML na URL ya kikurasa:

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

Tenda kwa mwenyewe

Muundo

Kurudi hali ya innerHTML:

element.innerHTML

Kufungua hali ya innerHTML:

element.innerHTML = text

Hali ya kiwango

Kina Maelezo
Mwili. Hali ya HTML

Hali ya kuwa na

Aina Maelezo
Mwili Hali ya HTML ya elementi

Mafikirio ya innerHTML, innerText na textContent

Hali ya innerText ina kuwa:

Inatoa hali ya matukio ya elementi na matukio yote ya kuzalia, bila hali jingine ya CSS inayopungua na chaji, kwa barabara ya <script> na <style> elementi.

Hali ya innerHTML ina kuwa:

Matukio ya kuzalia yenye hali ya matukio, kuhusu hali jingine na chaji ya HTML ya kizalia.

Hali ya textContent ina kuwa:

Matukio na matukio yote ya kuzalia yana hali ya matukio, kuhusu hali jingine na matukio ya CSS inayopungua, lakini bila chaji.

Mifano ya HTML

<p id="myP">   Hicho hili ina kina hali jingine na ina <span>elementi ya span</span>.</p>

Mifano ya JavaScript

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

Tenda kwa mwenyewe

Kuwa kama mtafiti:

Hali ya innerText ina kuwa:

Hicho hili ina kina hali jingine na ina elementi ya span.

Hali ya innerHTML ina kuwa:

   Hicho hili ina kina hali jingine na ina <span>elementi ya span</span>.

Hali ya textContent ina kuwa:

   Hicho hili ina kina hali jingine na ina elementi ya span.

Wafuuzi inayosaidia

Wafuuzi wote wamezuka element.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Mwongozo Mwongozo Mwongozo Mwongozo Mwongozo Mwongozo