JavaScript insertAdjacentText()

红太狼 2020-05-24 16:51 492阅读 0赞

# JavaScript insertAdjacentText()

此方法可以将指定文本插入到当前节点指定毗邻位置。

为了便于方法的记忆与理解，从其名称入手，由如下三个单词构成：

（1）. insert：翻译成汉语具有"插入"的意思。

（2）.adjacent：翻译成汉语具有"毗邻"的意思。

（3）.text：翻译成汉语具有"文本"的意思。

语法结构：

```javascript
element.insertAdjacentText(position, element)
```

方法解析：

（1）.element：目标元素节点。

（2）.position：规定被插入的位置的关键字，后面会逐一介绍。

（3）.element：被插入的元素节点。

position属性值是四个表示位置的关键字：

（1）.beforebegin：规定在目标元素的外部开始位置插入。

（2）.afterbegin：规定在目标元素的内部开始位置插入。

（3）.beforeend：规定在目标元素的内部结束位置插入。

（4）.afterend：规定在目标元素的外部结束位置插入。

图示如下：

![](/images/1590339161199.png)

假设红框是一个HTML元素形成的矩形何，上面分别标注了对应的四个毗邻位置。

**代码实例如下：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title> 
<style>
#target{
  width:200px;
  height:80px;
  background-color:#ccc;
}
</style>  
<script>
window.onload = () => {
  let oTarget=document.getElementById("target");
  let obt=document.getElementById("bt");
 
  obt.onclick = () => {
    oTarget.insertAdjacentText("afterbegin","本站名称是");
  }
}
</script>  
</head>
<body>
<div id="target">蒲公英云</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
```

点击按钮可以将文本"本站名称是"插入到div元素的内部开始位置。

此方法插入的内容会被当做文本处理，即便插入HTML代码也不会被解析。

```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title> 
<style>
#target{
  width:200px;
  height:80px;
  background-color:#ccc;
}
</style>  
<script>
window.onload = () => {
  let oTarget=document.getElementById("target");
  let obt=document.getElementById("bt");
 
  obt.onclick = () => {
    oTarget.insertAdjacentText("afterbegin","<p>本站</p>");
  }
}
</script>  
</head>
<body>
<div id="target">蒲公英云</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
```

可以看到，插入了一段"`<p>`本站`</p>`"，它不会被当做HTML代码解析。

非常容易理解，其他的几个关键本文就不再演示，可以自行测试。