JavaScript HTML DOM - HTML'yi Değiştirme
HTML DOM, JavaScript'in HTML öğelerinin içeriğini değiştirmesine izin verir.
HTML İçeriğini Değiştirme
Bir HTML öğesinin içeriğini değiştirmenin en kolay yolu, innerHTML
özelliği kullanmaktır.
Bir HTML öğesinin içeriğini değiştirmek için bu söz dizimini kullanın:
document.getElementById(id).innerHTML = new HTML
<p>
Bu örnek, bir öğenin içeriğini değiştirir :
Örnek
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Örnek açıkladı:
- Yukarıdaki HTML belgesi,
<p>
aşağıdakilere sahip bir öğe içerir:id="p1"
- Öğeyi almak için HTML DOM'yi kullanıyoruz
id="p1"
innerHTML
Bir JavaScript , o öğenin içeriğini ( ) "Yeni metin!" olarak değiştirir.
<h1>
Bu örnek, bir öğenin içeriğini değiştirir :
Örnek
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Örnek açıkladı:
- Yukarıdaki HTML belgesi,
<h1>
aşağıdakilere sahip bir öğe içerir:id="id01"
- Öğeyi almak için HTML DOM'yi kullanıyoruz
id="id01"
innerHTML
Bir JavaScript , o öğenin içeriğini ( ) "Yeni Başlık" olarak değiştirir
Bir Özelliğin Değerini Değiştirme
Bir HTML niteliğinin değerini değiştirmek için bu söz dizimini kullanın:
document.getElementById(id).attribute = new value
<img>
Bu örnek, bir öğenin src özniteliğinin değerini değiştirir :
Örnek
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Örnek açıkladı:
- Yukarıdaki HTML belgesi,
<img>
aşağıdakilere sahip bir öğe içerir:id="myImage"
- Öğeyi almak için HTML DOM'yi kullanıyoruz
id="myImage"
- Bir JavaScript
src
, o öğenin niteliğini "smiley.gif" iken "landscape.jpg" olarak değiştirir.
Dinamik HTML içeriği
JavaScript, dinamik HTML içeriği oluşturabilir:
Tarih : 29 Ocak 2022 23:54:00 GMT+0000 (Koordineli Evrensel Saat)
Örnek
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
belge.write()
JavaScript'te, document.write()
doğrudan HTML çıktı akışına yazmak için kullanılabilir:
Örnek
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
document.write()
Belge yüklendikten sonra asla kullanmayın . Belgenin üzerine yazacaktır.