ຈີສະຕີບ HTML DOM - ປ່ຽນ HTML

HTML DOM ສາມາດປ່ຽນຂັ້ນນຳ HTML ຫຼັກມົນລະພາບ.

ປ່ຽນ HTML ການສົ່ງອອກ

JavaScript ສາມາດສ້າງຂັ້ນນຳ HTML ທີ່ມີການສະແດງທຳມະດາ:

ໃນ JavaScript,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 = new text

ຕົວຢ່າງທີ່ປ່ຽນໄປ <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 ທີ່ມີ <img> ທີ່ id="myImage"
  • ພວກເຮົາໃຊ້ HTML DOM ເພື່ອຄົ້ນຫາສັນຕະວັດ id="myImage"
  • JavaScript ປ່ຽນຕົວປະກອບ src ຂອງສັນຕະວັດນີ້ຈາກ "smiley.gif" ເປັນ "landscape.jpg"