ਜਾਵਾਸਕ੍ਰਿਪਟ ਐੱਚਟੀਐੱਮਐੱਲ ਡੋਮ - ਐੱਚਟੀਐੱਮਐੱਲ ਵਿੱਚ ਬਦਲਣਾ

HTML DOM JavaScript ਨੂੰ HTML ਇਲਾਕੇ ਦਾ ਸਮੱਗਰੀ ਬਦਲਣ ਦੀ ਪ੍ਰਵਾਨਗੀ ਦਿੰਦਾ ਹੈ

ਹੱਲੀ ਹੱਲੀ HTML ਆਉਟਪੁੱਟ ਸਟਰੀਮ ਬਦਲਣਾ

JavaScript ਗਤੀਸ਼ੀਲ HTML ਸਮੱਗਰੀ ਬਣਾ ਸਕਦਾ ਹੈ:

ਜਿਸ ਵਿੱਚdocument.write() ਸਿੱਧੇ HTML ਆਉਟਪੁੱਟ ਸਟਰੀਮ ਵਿੱਚ ਲਿਖਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ:

ਇੰਸਟੈਂਸ

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਕਦੇ ਵੀ ਦਸਤਾਵੇਜ਼ ਲੋਡ ਹੋਣ ਦੇ ਬਾਅਦ document.write() ਦਾ ਇਸਤੇਮਾਲ ਨਾ ਕਰੋ document.write()ਇਹ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਖ਼ਾਲੀ ਕਰ ਦੇਵੇਗਾ。

ਹੱਲੀ ਹੱਲੀ HTML ਸਮੱਗਰੀ ਬਦਲਣਾ

ਸਭ ਤੋਂ ਸਰਲ ਤਰੀਕੇ ਵਿੱਚ HTML ਦਸਤਾਵੇਜ਼ ਦਾ ਸਮੱਗਰੀ ਬਦਲਣਾ, ਇਸ ਤਰੀਕੇ ਨਾਲ ਕਰਨਾ ਹੈ: innerHTML ਵਿਸ਼ੇਸ਼ਤਾ

ਜੇਕਰ ਤੁਸੀਂ HTML ਇਲਾਕੇ ਦਾ ਸਮੱਗਰੀ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸ ਵਿਚਾਰ ਵਿੱਚ ਵਰਤੋਂ ਕਰੋ:

document.getElementById(id).innerHTML = ਨਵਾਂ ਟੈਕਸਟ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ <p> ਇਲਾਕਾ ਦਾ ਸਮੱਗਰੀ:

ਇੰਸਟੈਂਸ

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ ਸਪਸ਼ਟੀਕਰਣ:

  • ਉੱਪਰ ਦਾ HTML ਦਸਤਾਵੇਜ਼ id="p1" ਦੇ <p> ਇਲਾਕਾ ਦਾ ਹੈ
  • ਅਸੀਂ HTML DOM ਨੂੰ ਵਰਤਿਆ ਹੈ id="p1" ਇਲਾਕਾ ਲਈ
  • JavaScript ਇਸ ਇਲਾਕੇ ਦਾ ਸਮੱਗਰੀ (innerHTML) "Hello Kitty!" ਬਦਲ ਦਿੰਦਾ ਹੈ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ <h1> ਇਲਾਕਾ ਦਾ ਸਮੱਗਰੀ:

ਇੰਸਟੈਂਸ

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ ਸਪਸ਼ਟੀਕਰਣ:

  • ਉੱਪਰ ਦਾ HTML id="header" ਦੇ ਇੱਕ <h1> ਇਲਾਕਾ ਦਾ ਹੈ
  • ਅਸੀਂ HTML DOM ਨੂੰ ਵਰਤਿਆ ਹੈ id="header" ਤੋਂ ਇਲਾਕਾ ਲਈ
  • JavaScript ਇਸ ਏਜੰਟ ਦਾ ਸਮੱਗਰੀ (innerHTML) ਬਦਲੋ

ਅਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ ਬਦਲੋ

ਜੇਕਰ ਤੁਸੀਂ HTML ਅਟਰੀਬਿਊਟ ਦਾ ਮੁੱਲ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਹੇਠ ਲਿਖੇ ਗਰੰਟੀ ਦੀ ਵਰਤੋਂ ਕਰੋ:

document.getElementById(id).ਅਟਰੀਬਿਊਟ = new value

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ <img> ਏਜੰਟ ਦਾ src ਸ਼੍ਰੇਣੀ ਦਾ ਮੁੱਲ:

ਇੰਸਟੈਂਸ

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ ਸਪਸ਼ਟੀਕਰਣ:

  • ਉੱਪਰੋਕਤ HTML ਡਾਕੂਮੈਂਟ ਵਿੱਚ id="myImage" ਦਾ <img> ਏਜੰਟ ਹੈ
  • ਅਸੀਂ HTML DOM ਦੀ ਮਦਦ ਨਾਲ id="myImage" ਏਜੰਟ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ
  • JavaScript ਇਸ ਏਜੰਟ ਦੇ src ਅਟਰੀਬਿਊਟ ਨੂੰ "smiley.gif" ਤੋਂ "landscape.jpg" ਬਦਲ ਦਿੰਦਾ ਹੈ