innerHtml的用法及理解

理解：
对于innerHTML 属性，几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML（包括html标签以及里边的内容文字）。

语法：
tablerowObject.innerHTML=HTML

浏览器支持：
所有主要浏览器都支持 innerHTML 属性。

用法及示例：

获取内容：

我们可以使用 document.getElementById(‘ xx ’).innerHTML 来获取指定标签内的html内容，其中xx为所选择的标签id

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML用法和理解title>
head>
<body>
    <p id="textp"><span>我的外层是span标签span>p>
    <input type="button" onclick="getInnerHTML()" value="点击获取" />
body>
<script type="text/javascript">
    function getInnerHTML(){
        alert(document.getElementById("textp").innerHTML);
    }
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

点击按钮后网页会弹出提示框，框内内容为P标签内的html内容： [span]我的外层是span标签[/span] ；这里的<>用[]代替了不然解析出来span标签会被当成标签不显示

设置内容：

使用 document.getElementById(‘ xx ’).innerHTML=’需要设置的内容’; 其中xx为所选择的标签id

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML用法和理解title>
head>
<body>
    <p id="textp"><span>我的外层是span标签span>p>
    <input type="button" onclick="getInnerHTML()" value="点击设置" />
body>
<script type="text/javascript">
    function getInnerHTML(){
        document.getElementById("textp").innerHTML = "span标签的外层是P标签";
    }
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

点击按钮后，P标签内的文字内容会被设置成为 “span标签的外层是P标签”；

总结：

innerHtml标签可以获取标签内的html内容，用法为：document.getElementById(‘ xx ’).innerHTML
innerHtml标签也可以用来设置标签内的html内容，用法为：document.getElementById(‘ xx ’).innerHTML=’需要设置的内容’;

相关阅读:
ansible控制windows机器
线程的基本操作
linux上编译opencv静态库注意事项
Springboot毕设项目餐厅后勤管理系统cxjgl（java+VUE+Mybatis+Maven+Mysql）
Kubernetes HPA
安装DBD-Oracle报错处理
AI：86-基于深度学习的街景图像地理位置识别
Opentelemetry SDK的简单用法
网络中冗余备份
C++怎么判断windows系统是64位还是32位

原文地址：https://blog.csdn.net/cheng1a/article/details/126408392