JavaScript HTML DOM - 改变 HTML

Ang HTML DOM ay nagbibigay sa JavaScript na baguhin ang nilalaman ng HTML elemento.

Bago ang HTML output stream

Ang JavaScript ay kayang gumawa ng dinamikong HTML nilalaman:

Sa JavaScript,document.write() Ginagamit para direktang ilagay sa HTML output stream:

实例

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

亲自试一试

Huwag gumamit ng document.write() pagkatapos na mag-load ang dokumento: document.write().Ginagamit ito upang pag-overlay ang dokumento.

Bago ang nilalaman ng HTML

Ang pinakasimpleng paraan upang baguhin ang nilalaman ng HTML ang gumamit ng: innerHTML Atributo.

Kung gusto mong baguhin ang nilalaman ng elemento ng HTML, gamitin ang ganitong syntax:

document.getElementById(id).innerHTML = new text

本例修改了 <p> Ang nilalaman ng elemento:

实例

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

亲自试一试

例子解释：

  • Ang HTML na ito ay naglalaman ng isang <p> na may id="p1"
  • Namin ay gumamit ng HTML DOM upang kunin ang elemento na may id="p1"
  • Ang JavaScript ay inilalagay ang nilalaman ng elemento (innerHTML) na "Hello Kitty!"

本例修改了 <h1> Ang nilalaman ng elemento:

实例

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

亲自试一试

例子解释：

  • Ang HTML na ito ay naglalaman ng isang <h1> na may id="header"
  • Namin ay gumamit ng HTML DOM upang kunin ang elemento na may id="header"
  • JavaScript 更改此元素的内容（innerHTML）

改变属性的值

如需修改 HTML 属性的值，请使用如下语法：

document.getElementById(id).attribute = 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"