您的位置：首页 > Web前端 > HTML

innerHTML的DOM用法

2017-08-26 11:05 190 查看

innerHTML

innerHTML的用法：

获取DOM元素

DOMObject.innerHTML

特别注意：

如果获取的DOM元素为ID，则直接 .innerHTML 即可；

如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="para">hello world</p>

<script type="text/javascript">
var content = document.getElementById("para");
console.log(content.innerHTML);
</script>

</body>
</html>

如果获取的DOM元素为ID以外的其他，则直接 .innerHTML 不行，必须加上索引号，因为其他获取到的是一个数组，它的标签不止一个

如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p class="para">hello world</p>

<script type="text/javascript">
var content = document.getElementsByClassName("para")[0];
console.log(content.innerHTML);
</script>

</body>
</html>

与innerText的区别：

推荐看这篇博客：http://blog.csdn.net/magi1201/article/details/44131361

不过，要纠正一点：现在火狐也支持innerText了，以前使用innerText得到的是undefined，现在它得到的结果是标签内文本。真是程序媛的福音，喜大普奔~奔走相告~~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dom

相关文章推荐

新的分享

章节导航