innerHTML的使用替换问题

今天在练习ajax的时候想要替换下按钮，但是他只会在按钮的内部添加标签但是不会将按钮整体替换，解决方法是在按钮的标签外部在添加一个标签，然后替换外部的标签，我想问一下为什么他不能替换本身呢?还是说这里的innerHTML代表的是按钮的内容


```javascript
<body>
    <button id = 'btn'>lalal</button>
    <script>
        var btn = document.querySelector('#btn')
        btn.onclick = function aa(){
            btn.innerHTML = '<div>'+'sasa'+'<div>'
        }
    </script>
</body>

```

innerhrml本身就是改的当前元素下的html 人家不支持改自身，建议看下文档

innerHTML是改变内部的HTML，也许你可以试下outerHTML😂


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style></style>
  </head>
  <body>
    <button id="btn">lalal</button>
    <script>
      // var btn = document.querySelector("#btn");
      // btn.onclick = function aa() {
      //   btn.innerHTML = "<div>" + "sasa" + "<div>";
      // };

      // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
      // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/outerHTML

      var btn = document.querySelector("#btn");
      btn.onclick = function () { // 这里可以不加函数名aa
        btn.outerHTML = "<div>sasa</div>"; // 这里最后的div标签应该是闭合的<</div>>
      };
    </script>
  </body>
</html>

btn 调用当然就是 btn的内容，谁调用就是谁的。
你想改变其它元素的，就获取其他元素然后 .innerHtml即可