innerHTML属性

最新推荐文章于 2024-06-19 11:25:42 发布

原创最新推荐文章于 2024-06-19 11:25:42 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

这篇博客介绍了JavaScript中的innerHTML属性，用于获取和设置HTML元素的内容。首先展示了如何使用innerHTML读取<span>元素的文本，然后演示了如何利用innerHTML向<div>元素中插入文本和HTML表格，包括创建表格及填充数据的过程。

<html>
<head>
    <meta charset="utf-8"/>
    <title>innerHTML属性</title>
</head>
<body>
<span id="span1Id">我是 span1 中的文本内容</span>
<hr/>
<div id="div1Id"></div>
<hr/>
</body>
<script type="text/javascript">
    var span1 = document.getElementById("span1Id");
    document.write("输出 span1 中的文本：" + span1.innerHTML + "<br/>");
    //向 div1 的文本中写入指定内容
    var div1 = document.getElementById("div1Id");
    div1.innerHTML = "<h3>我是 div1 中的文本内容<h3>";
    //向 div1 的文本中加入表格
    var tempTable = "<table border='2' bordercolor='blue'>";

    tempTable += "<tr><td>aaa</td></tr><tr><td>bbb</td></tr><tr><td>ccc</td></tr>";

    tempTable += "</table>";
    div1.innerHTML = tempTable;
</script>
</html>