参考资料

  1. HTML DOM 对iframe排版
  2. HTML DOM 返回一个客户端图像映射的usemap的值
  3. HTML DOM 返回当前的文件和链接的文档之间的关系
  4. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  5. HTML DOM document.write() 方法
  6. HTML DOM 打开输出流，向流中输入文本实例
  7. HTML DOM 返回一个表单中元素的数量 实例
  8. HTML DOM删除下拉列表中的选项

HTML DOM 用指定的ID弹出一个元素的innerHTML实例

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：元素内容标签实例方法基本属性主要完整功能