JavaScirpt基础 之 JavaScript HTML DOM - 改变 HTML

JavaScript HTML DOM - 改变 HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是：

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

举例

!DOCTYPE html>
    
html>
    
body>
    

script>
    
document.write(Date());
    
/script>
    

/body>
    
/html>
    

lamp 绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了

元素的内容：

举例

html>
    
body>
    

p id="p1">
    Hello World!/p>
    

script>
    
document.getElementById("p1").innerHTML="新文本!";
    
/script>
    

/body>
    
/html>
    

本例改变了

元素的内容：

举例

!DOCTYPE html>
    
html>
    
body>
    

h1 id="header">
    Old Header/h1>
    

script>
    
var element=document.getElementById("header");
    
element.innerHTML="新标题";
    
/script>
    

/body>
    
/html>
    

举例讲解：

上面的 HTML 文档含有 id="header" 的

元素

我们使用 HTML DOM 来获得 id="header" 的元素

JavaScript 更改此元素的内容 (innerHTML)

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！