参考资料

  1. HTML DOM 返回图像映射的某个区域的hostname实例
  2. HTML DOM 返回文档的最后一次修改时间 实例
  3. HTML DOM 打开输出流，向流中输入文本实例
  4. HTML DOM 返回加载的文档的服务器域名 实例
  5. HTML DOM单元格内容垂直对齐
  6. HTML DOM改变表格的cellpadding和cellspacing
  7. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
  8. HTML DOM 返回文档中的图像数

HTML DOM 获取指定ID元素innerHTML实例

基本介绍

通过document.getElementById()方法可以获取指定ID的DOM元素，然后使用innerHTML属性读取或修改其内容。

主要标签和方法

<div id="example">原始内容</div>
// 获取元素
var element = document.getElementById("example");

// 读取内容
var content = element.innerHTML;

// 修改内容
element.innerHTML = "新内容";

完整实例

<!DOCTYPE html>
<html>
<head>
    <title>innerHTML示例</title>
    <style>
        #demo {
            padding: 20px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            margin: 10px;
        }
        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="demo">这是一个示例div元素</div>
    <button onclick="changeContent()">更改内容</button>
    <button onclick="showContent()">显示内容</button>

    <script>
        function changeContent() {
            document.getElementById("demo").innerHTML = "内容已更改！" + new Date();
        }
        
        function showContent() {
            alert(document.getElementById("demo").innerHTML);
        }
    </script>
</body>
</html>

功能说明

  1. 读取元素内容：获取元素的HTML内容（包括标签）

  2. 修改元素内容：可以插入纯文本或HTML标签

  3. 动态更新：无需刷新页面即可改变显示内容

CSS扩展

可以为获取的元素添加样式：

var elem = document.getElementById("example");
elem.style.color = "red";
elem.style.fontSize = "20px";
elem.className = "highlight"; // 添加CSS类

或者使用classList：

elem.classList.add("active");
elem.classList.remove("inactive");
elem.classList.toggle("visible");
TAG：元素内容标签实例方法基本属性主要完整功能