参考资料

  1. HTML DOM 改变一个包含在iframe中的文档的背景颜色
  2. HTML DOM 节点列表
  3. HTML DOM 属性
  4. HTML DOM 返回一个链接的type属性的值实例
  5. HTML DOM 返回image的longdesc属性的值
  6. HTML DOM弹出下拉列表中所有选项
  7. HTML DOM 返回当前的文件和链接的文档之间的关系
  8. HTML DOM 返回页面上所有相对URL的基URL 实例

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。