点击切换帐号登陆
帐号密码登陆

做为HTML元素的内容插入

# 做为HTML的元素内容

## 1. innerHTML属性

* 将包括html标记的文本,插入到指定的元素内部
* 所有浏览器都支持

-------------------------------------------

## 2. outerHTML

* 将元素自身,即调用者,用新的内容替换
* 只允许在元素`Element`上调用,不允许在文档`Document`上调用

-------------------------------------------

## 3. insertAdjacentHTML()

* 将任何的含有html标记的字符串插入到指定位置
* 以元素起始标签为标记,有4个插入点
* `beforebegin / afterbegin`: 起始标签的前后
* `beforeend / afterend`: 结束标签的前后

-------------------------------------------

## 4. 示例源码

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>做为HTML的元素内容</title>
</head>
<body>
<div>
<p>html.cn</p>
</div>

<script>
var p = document.getElementsByTagName('p')[0];

// 1. innerHTML: 用新内容替换掉元素内的原内容
// p.innerHTML = '<strong>html中文网</strong>';
// 看上去还不错, 但是在追回内容,使用'+='运算时,因为又要序列化又要解析,效率极其低下
// p.innerHTML += '是一个<span style="color:red">公益专业</span>的前端学习平台';

// 2. outerHTML: 将元素自身,即调用者,用新的内容替换
p.outerHTML = '<h2>html.cn</h2>';
// 注: 只允许在元素上调用,不允许在文档上调用(也好理解,如果在文档上调用,也write就是一样了)

// 3. insertAdjacentHTML: 将任何的含有html标记的字符串插入到任意位置
var div = document.getElementsByTagName('div')[0];
var content = '<p style="color:red">中文网</p>';
// 插入到起始标签<div>的前后
// 位置标记: 位置(before前,after后) + 标记(begin起始标签)
div.insertAdjacentHTML("beforebegin", content);
div.insertAdjacentHTML("afterbegin", content);

// 位置标记: 位置(before前,after后) + 标记(begin起始标签)
div.insertAdjacentHTML("beforeend", content);
div.insertAdjacentHTML("afterend", content);

</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号