关于 insertAdjacentHTML 用法详解

最新推荐文章于 2024-02-22 14:47:14 发布

MinorJack

最新推荐文章于 2024-02-22 14:47:14 发布

阅读量526

点赞数 1

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/MinorJack/article/details/128567416

版权

element.insertAdjacentHTML() 这个方法将需要的文本以 HTML 格式解析后插入到需要的位置，通常用于向页面插入标签形式的文本内容

element.insertAdjacentHTML(position, text);

position：需要插入的位置（相对于被选择的元素的位置），有且只有四个合法位置

位置	属性说明
`beforebegin`	元素自身前面
`afterbegin`	元素第一个子元素前面
`beforeend`	元素第一个子元素前面
`afterend`	元素自身后面

下图详解

text：需要插入到页面的文本

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      box-sizing: border-box;
    }
    .main {
      margin: 100px auto;
      width: 600px;
      padding: 80px;
      background-color: #d3d3d3;
    }
    .element {
      margin: 20px 0;
      padding: 50px;
      width: 100%;
      background-color: #0fb1c4;
    }
    .son-el {
      margin: 50px 0;
      height: 200px;
      background-color: #aabd05;
    }
    button {
      margin: 20px 0;
      margin-right: 10px;
    }
    .box {
      width: 100%;
      height: 100px;
      background-color: rgb(182, 3, 77);
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="element">
      <div class="son-el"></div>
    </div>
    <button onclick="beforebegin()">beforebegin</button>
    <button onclick="afterbegin()">afterbegin</button>
    <button onclick="beforeend()">beforeend</button>
    <button onclick="afterend()">afterend</button>
  </div>
  <script>
    var element = document.querySelector('.element')
    function beforebegin() {
      element.insertAdjacentHTML('beforebegin','<div class="box"></div>')
    }
    function afterbegin() {
      element.insertAdjacentHTML('afterbegin','<div class="box"></div>')
    }
    function beforeend() {
      element.insertAdjacentHTML('beforeend','<div class="box"></div>')
    }
    function afterend() {
      element.insertAdjacentHTML('afterend','<div class="box"></div>')
    }
  </script>
</body>
</html>

点击 beforebegin ：

点击 afterbegin：

点击 beforeend：

点击 afterend：

总结：这个只需要理清楚这四个位置即可 beforebegin afterbegin beforeend afterend