HTML DOM Element innerHTML کا حصص

تعلیم اور استعمال

innerHTML عناصر کا HTML محتوا (داخلی HTML) تعین یا واپس لایا جاتا ہے یا نہیں。

بھی دیکھئے:

innerText کا حصص

textContent کا حصص

مثال

مثال 1

id="myP" کا علامت کا HTML محتوا حاصل کرو:

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

ਆਪਣੇ ਆਪ ਸਿਖਾਓ

مثال 2

id="demo" کا علامت کا HTML محتوا بدل کرو:

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

ਆਪਣੇ ਆਪ ਸਿਖਾਓ

مثال 3

id="myList" کا <ul> علامت کا HTML محتوا حاصل کرو:

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

ਆਪਣੇ ਆਪ ਸਿਖਾਓ

مثال 4

id="demo" کا <p> علامت کا HTML محتوا حذف کرو:

element.innerHTML = "";

ਆਪਣੇ ਆਪ ਸਿਖਾਓ

مثال 5

دو کایا کا HTML محتوا بدل کرو:

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

ਆਪਣੇ ਆਪ ਸਿਖਾਓ

مثال 6

ਇਲੈਕਟ੍ਰੌਨ ਦੇ HTML ਸਮੱਗਰੀ ਨੂੰ ਦੁਹਰਾਓ:

element.innerHTML += element.innerHTML;

ਆਪਣੇ ਆਪ ਸਿਖਾਓ

ਉਦਾਹਰਣ 7

ਲਿੰਕ ਦੇ HTML ਸਮੱਗਰੀ ਅਤੇ URL ਨੂੰ ਬਦਲੋ:

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

ਆਪਣੇ ਆਪ ਸਿਖਾਓ

ਗਰੰਥ

ਵਾਪਸ ਦਿੱਤਾ ਗਿਆ innerHTML ਪ੍ਰਤੀਯੋਗਿਤਾ:

element.innerHTML

ਸੈਟ ਕਰੋ innerHTML ਪ੍ਰਤੀਯੋਗਿਤਾ:

element.innerHTML = text

ਪ੍ਰਤੀਯੋਗਿਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
ਸਟਰਿੰਗ. HTML ਸਮੱਗਰੀ

ਵਾਪਸ ਦਿੱਤਾ ਗਿਆ ਮੁੱਲ

ਇਨਪੁਟ ਟਾਈਪ ਵਰਣਨ
ਸਟਰਿੰਗ ਇਲੈਕਟ੍ਰੌਨ ਦਾ HTML ਸਮੱਗਰੀ

innerHTML, innerText ਅਤੇ textContent ਦਾ ਅਲਗ ਹੋਣਾ

innerText ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਕੇਵਲ ਇਲੈਕਟ੍ਰੌਨ ਅਤੇ ਸਾਰੇ ਉਪਲਬਧ ਪੌਣਿਆਂ ਦਾ ਟੈਕਸਟ ਸਮੱਗਰੀ ਵਾਪਸ ਦਿੰਦਾ ਹੈ, ਨਾ ਕੇਵਲ CSS ਛੁਪੇ ਟੈਕਸਟ ਅਤੇ ਸਪੇਸਿੰਗ ਅਤੇ ਟੈਗ, ਸਿਵਾਏ <script> ਅਤੇ <style> ਇਲੈਕਟ੍ਰੌਨ ਤੋਂ。

innerHTML ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਇਲੈਕਟ੍ਰੌਨ ਦਾ ਟੈਕਸਟ ਸਮੱਗਰੀ, ਸਾਰੇ ਖਾਲੀ ਅਤੇ ਅੰਦਰੂਨੀ HTML ਟੈਗ ਨਾਲ。

textContent ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਇਲੈਕਟ੍ਰੌਨ ਅਤੇ ਸਾਰੇ ਉਪਲਬਧ ਪੌਣਿਆਂ ਦਾ ਟੈਕਸਟ ਸਮੱਗਰੀ, ਖਾਲੀ ਅਤੇ CSS ਛੁਪੇ ਟੈਕਸਟ ਨਾਲ, ਲੇਕਿਨ ਟੈਗ ਨਹੀਂ ਹੈ。

HTML ਉਦਾਹਰਣ

<p id="myP">   ਇਹ ਇਲੈਕਟ੍ਰੌਨ ਹੇਠਲੇ ਸਪੇਸਿੰਗ ਨਾਲ ਹੈ ਅਤੇ <span>ਇੱਕ span ਇਲੈਕਟ੍ਰੌਨ</span>.</p>

JavaScript ਉਦਾਹਰਣ

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

ਆਪਣੇ ਆਪ ਸਿਖਾਓ

ਉੱਪਰੋਕਤ ਉਦਾਹਰਣ ਵਿੱਚ:

innerText ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਇਹ ਇਲੈਕਟ੍ਰੌਨ ਹੇਠਲੇ ਸਪੇਸਿੰਗ ਨਾਲ ਹੈ ਅਤੇ ਇੱਕ span ਇਲੈਕਟ੍ਰੌਨ ਹੈ.

innerHTML ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

   ਇਹ ਇਲੈਕਟ੍ਰੌਨ ਹੇਠਲੇ ਸਪੇਸਿੰਗ ਨਾਲ ਹੈ ਅਤੇ <span>ਇੱਕ span ਇਲੈਕਟ੍ਰੌਨ</span> ਹੈ.

textContent ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

   ਇਹ ਇਲੈਕਟ੍ਰੌਨ ਹੇਠਲੇ ਸਪੇਸਿੰਗ ਨਾਲ ਹੈ ਅਤੇ ਇੱਕ span ਇਲੈਕਟ੍ਰੌਨ ਹੈ.

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ ਕਰਦਾ ਹੈ

ਸਾਰੇ ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ ਕਰਦੇ ਹਨ element.innerHTMLਪੰਜਾਬੀ ਵਿੱਚ ਇਹ ਬਿਨਾਂ ਸਮਾਨਤਾ ਦੇ ਨਹੀਂ ਹੈ

ਚਰਮੋਨ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਮੋਨ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ