JavaScript 显示方案

悠悠 2021-11-23 10:40 257阅读 0赞

# **JavaScript 显示方案** #

JavaScript 能够以不同方式“显示”数据：

*  **使用 window.alert() 写入警告框**  
    alert() 方法用于显示带有一条指定消息和一个 确认 按钮的警告框

<!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一张网页</h1>
    
    <p>我的第一个段落</p>
    
    <script>
    window.alert(5 + 6);
    </script>
    
    </body>
    </html>

![在这里插入图片描述][20190726161714310.png]

*  **innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。**  
    使用 innerHTML  
    如需访问 HTML 元素，JavaScript 可使用 `document.getElementById(id)` 方法。  
    id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

<!DOCTYPE html>
    <html>
    <body>
    
    <h2>我的第一张网页</h2>
    <p>我的第一个段落。</p>
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML = 5 + 6;
    </script>
    
    </body>
    </html>

![在这里插入图片描述][20190726161029373.png]  
**注：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。**

*  **document.write()**  
    出于测试目的，使用 document.write() 比较方便：

<!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一张网页</h1>
    
    <p>我的第一个段落</p>
    
    <script>
    document.write(5 + 6);
    </script>
    
    </body>
    </html>

![在这里插入图片描述][20190726162344658.png]

*  console.log()  
    在浏览器中，您可使用 console.log() 方法来显示数据。

<!DOCTYPE html>
    <html>
    <body>
    
    <h1>我的第一张网页</h1>
    
    <p>我的第一个段落</p>
    
    <script>
    console.log(5 + 6);
    </script>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODE3ODI3_size_16_color_FFFFFF_t_70]

[20190726161714310.png]: /images/20211122/65d01a5a9c0c4f65a2b72fbb3b95f458.png
[20190726161029373.png]: /images/20211122/839f197a44cf40a6a308f5b08f2d991f.png
[20190726162344658.png]: /images/20211122/adfc4bdb282d48feb1ba2ad001e9d113.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODE3ODI3_size_16_color_FFFFFF_t_70]: /images/20211122/297fa6e7be6e42128c339fa362893be4.png