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>

 绝对不要在文档加载完成之后使用 document.write("xxx");  (例如在函数数中使用)这会覆盖该文档。

改变 HTML 内容

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

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

document.getElementById( id).innerHTML=" new HTML";

本例改变了 <p>元素的内容：

实例

<html>
<body>

<p id="id_p_result">Hello World!</p>

<script>
  document.getElementById("id_p_result").innerHTML="hello beyond~";
</script>

</body>
</html>

本例改变了 <h1> 元素的内容：

实例

<!DOCTYPE html>
<html>
<body>

<h1 id="id_h1">那朵花</h1>

<script>
var h1Node=document.getElementById("id_h1");
h1Node.innerHTML="未闻花名";
</script>

</body>
</html>

实例讲解：

  • 上面的 HTML 文档含有 id="id_h1" 的 <h1> 元素


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


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


改变 HTML 属性

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

document.getElementById( id). attributeName = "new attribute value"

本例点击按钮,改变了 <img> 元素的 src 属性,从而实现了开关电灯的效果：

代码如下:

<!DOCTPYE html>    
<html lang="zh">    
<head>    
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>  
    <meta charset="UTF-8">  
    <meta name="author" content="beyond">  
    <meta http-equiv="refresh" content="520">  
    <meta name="description" content="免费零基础教程">  
    <meta name="viewport" content="width=device-width,   
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />  
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">  
    <title>beyondの心中の动漫神作</title>  
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">  
  
    <!--[if lt IE 9]>  
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>  
    <![endif]-->  
    <style type="text/css">    
        body{    
            font-size: 100%;    
            background-image: url("sakura4.png");    
            background-repeat: no-repeat;    
            background-position: center center;    
            /*声明margin和padding是个好习惯*/    
            margin: 0;    
            padding: 0;   
        }  
    </style>    
  
    <script type="text/javascript">  
        // imgView Tap 手势  
        function imgViewTapped() {  
            var imgNode = document.getElementById("id_img_light");  
            var isLightOn = imgNode.src.match("lighton.gif");  
            if (isLightOn) {  
                imgNode.src = "lightoff.gif";  
            } else{  
                imgNode.src = "lighton.gif";  
            }  
        }  
    </script>  
</head>    
    
<body>    
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">    
            未闻花名  
        </h1>  
  
        <img id="id_img_light" οnclick="imgViewTapped()" src="lightoff.gif" width="100" height="180" />  
          
  
        <p class="sgcontentcolor sgcenter" style="clear:left;">  
            <b>注意:</b>点击灯泡,将有好事发生~  
        </p>  
        <footer id="copyright">  
            <p style="font-size:14px;text-align:center;font-style:italic;">    
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>    
            </p>          
        </footer>  
    </div>  
</body>    
</html>

效果如下:


核心代码:

<!DOCTYPE html>
<html>
<body>

<img id="id_img_light" src="lightoff.gif">

<script>
document.getElementById("id_img_light").src="lighton.gif";
</script>

</body>
</html>

实例讲解：

  • 上面的 HTML 文档含有 id="id_img_light" 的 <img> 元素

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

  • JavaScript 更改此元素的属性（把 "lightoff.gif" 改为 "lighton.jpg"）