今天我们来复习最后一个关于DOM操作的API,insertAdjacentHTML()
,用来将HTML插入到页面中。同样还有两个差不多的方法,insertAdjacentElement()
和insertAdjacentText()
,他们的用法差不多,只是第二个参数有些区别。
语法
insertAdjacentHTML()
是 Element
接口的一个方法,任何元素都可以调用。
insertAdjacentHTML()
方法解析一段 HTML 文本并将结果节点插入到 DOM 树的指定位置。
element.insertAdjacentHTML(positionName, text);
1) position
positionName
是一个字符串,表示相对于元素的位置。 positionName
接受以下四个值之一:
'beforebegin'
: 在元素之前'afterbegin'
: 在元素的第一个子元素之前'beforeend'
: 在元素的最后一个子元素之后'afterend'
: 在元素之后
注意,'beforebegin'
和'afterend'
仅在元素位于 DOM 树中并且具有父元素时才可用。
insertAdjacentHTML()
方法没有返回值。
下面代码注释说明了每个参数所在的位置
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
2) text
text
参数是一个字符串,insertAdjacentHTML()
方法将其解析为 HTML,和innerHTML
差不多。
安全问题
与innerHTML
一样,如果需要把用户输入传递到insertAdjacentHTML() 方法中,则应始终对其进行转义来避免安全风险。
使用例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>insertAdjacentHTML() Demo</title>
</head>
<body>
<ul id="list">
<li>CSS</li>
</ul>
<script>
let list = document.querySelector('#list');
list.insertAdjacentHTML('beforebegin', '<h2>Web 前端必备技能</h2>');
list.insertAdjacentHTML('afterbegin', '<li>HTML</li>');
list.insertAdjacentHTML('beforeend', '<li>JavaScript</li>');
list.insertAdjacentHTML('afterend', '<p>更多知识等你学习</p>');
</script>
</body>
</html>
输出的HTML结构为
<h2>Web 前端必备技能</h2>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>更多知识等你学习</p>
最后
这个方法可能使用的比较少,大家有用过这个方法吗?
如果你想跟着我一起复习DOM知识,微信搜索【小帅的编程笔记】,每天更新