innerHtml的用法及理解

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

小程不爱动

12734人浏览 · 2022-08-18 16:32:46

小程不爱动 · 2022-08-18 16:32:46 发布

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>

点击按钮后网页会弹出提示框，框内内容为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>span标签的外层是P标签</span>";
    }
</script>
</html>

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

总结：

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