您的位置:首页> 前端教程> JS教程
文章导航

JavaScript innerHTML

2018-9-30 19:58| 作者: admin| 查看: 4719| 评论: 0|来自: 蚂蚁部落

innerHTML属性可以设置或者返回指定元素的HTML内容。

此属性使用频繁且极为简单,但是却很容易给初学者造成一些麻烦。

这一切的麻烦的起源主要在于如何去理解“HTML内容”。

后面会通过代码实例详细做一下介绍。

语法结构一:

[JavaScript] 纯文本查看 复制代码
htmlContent=domObj.innerHTML

获取指定元素内的HTML内容。

语法结构二:

[JavaScript] 纯文本查看 复制代码
domObj.innerHTML=htmlContent

为指定元素设置HTML内容。

浏览器兼容:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).opera浏览器支持此属性。

(5).火狐浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  odiv.innerHTML = "蚂蚁部落";
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/200018ng7qttsozs797sgg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码应该没有任何异议,可以将div元素内容设置为"蚂蚁部落"。

特别说明:innerHTML属性是重置元素HTML内容,而不是追加。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  odiv.innerHTML="蚂蚁部落";
}
</script>
</head>
<body>
<div id="ant">青岛市南区</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/204128f41g7ffarvzfss2r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

再来解决一个问题,文章开头提到的“HTML内容”表达了怎样的含义呢。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  odiv.innerHTML = "<b>蚂蚁部落</b>";
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/200044ukmdhgee2gh6wmgk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到,字符串"蚂蚁部落"被加粗了。

这是因为赋值给innerHTML的字符串都会被当做HTML代码解析。

由于标签<b>具有加粗效果,所以"蚂蚁部落"四个字被加粗了。

再来看使用innerHTML属性返回指定元素的内的HTML内容。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  alert(odiv.innerHTML);
}
</script>
</head>
<body>
<div id="ant"><b>蚂蚁部落</b></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/30/200143j2cwyrcw48rv84bb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码可以弹出div元素中的HTML内容,既然是HTML内容,那自然包括<b>标签。

如果上面的介绍还不够清晰,那么再来对比一下innerText运行效果。

innerText属性可以返回指定元素内的文本内容,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript"> 
window.onload=function(){
  let odiv = document.getElementById("ant");
  alert(odiv.innerText);
}
</script>
</head>
<body>
<div id="ant"><b>蚂蚁部落</b></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/11/142428k4phceuul9jwe4n4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码会弹出div元素中的文本内容。

为什么标签<b>不算做文本呢,因为<b>会被浏览器解析,是对文本的修饰。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部