insertAdjacentHTMLが期待通りに動かない

# 概要
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

`insertAdjacentHTML` はある要素にHTMLを挿入できる便利な人です。
（詳細は上記URLを参照してください）
その便利さに甘えてよくない使い方をしたからなのか期待通りに動かないことがあったのでメモです

# コード
```html
<html>
  <script>
    const html = `<head><title>example</title></head>
      <body><div style="background-color:gray">BODY</div></body>`;
    const elem = document.getElementsByTagName('html')[0];
    elem.insertAdjacentHTML('afterbegin', html);
    console.log(elem.innerHTML);
  </script>
</html>
```

htmlタグだけ用意してそれ以外の全ての要素を `insertAdjacentHTML` で挿入するコードです
最後にhtmlタグ内のHTMLをconsole.logします

# 動作確認
## Chrome
`バージョン: 73.0.3683.75（Official Build） （64 ビット）`

### 表示
<img width="250" alt="スクリーンショット 2019-03-14 16.08.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/3800/6ee1560c-b090-f09e-3036-0c8b5fa173e7.png">

### console.log
出力されたままだと見づらいので整形だけしました
scriptタグがheadタグで囲まれていますが、挿入したHTMLからすると期待通りの動き

```html
<head>
  <title>example</title>
</head>
<body>
  <div style="background-color:gray">BODY</div>
</body>
<head>
  <script>
    const html = `<head><title>example</title></head>
      <body><div style="background-color:gray">BODY</div></body>`;
    const elem = document.getElementsByTagName('html')[0];
    elem.insertAdjacentHTML('afterbegin', html);
    console.log(elem.innerHTML);
  </script>
</head>
```

## Safari
`バージョン12.0.3 (14606.4.5)`

### 表示
<img width="133" alt="スクリーンショット 2019-03-14 16.16.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/3800/c5939bc5-4c77-223a-7bfe-6cea6a1cab41.png">

### console.log
出力されたままだと見づらいので整形だけしました
「titleタグを囲っていたheadタグ」と「bodyタグ」が消えて、中身のtitleとdivタグだけになりました

```html
<title>example</title>
<div style="background-color:gray">BODY</div>
<head>
  <script>
    const html = `<head><title>example</title></head>
      <body><div style="background-color:gray">BODY</div></body>`;
    const elem = document.getElementsByTagName('html')[0];
    elem.insertAdjacentHTML('afterbegin', html);
    console.log(elem.innerHTML);
  </script>
</head>
```

## Firefox
`65.0.1 (64 ビット)`

### 表示
<img width="129" alt="スクリーンショット 2019-03-14 16.18.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/3800/43f50a2b-48a0-58bf-be32-20ab40fcd272.png">

### console.log
出力されたままだと見づらいので整形だけしました
「titleタグを囲っていたheadタグ」と「bodyタグ」が消えて、中身のtitleとdivタグだけになりました

```html
<title>example</title>
<div style="background-color:gray">BODY</div>
<head>
  <script>
    const html = `<head><title>example</title></head>
      <body><div style="background-color:gray">BODY</div></body>`;
    const elem = document.getElementsByTagName('html')[0];
    elem.insertAdjacentHTML('afterbegin', html);
    console.log(elem.innerHTML);
  </script>
</head>
```

# まとめ
どのブラウザでも見た目は想像した通りでしたが、HTMLがブラウザによって変わりました。
（bodyタグがないので正確には見た目も微妙に違う）

まとめてぶち込み過ぎなのが悪そう
**なぜこうなるのかまで追いきれてないので教えてもらえるとうれしいです**

# 補足
以下のように書けばどのブラウザでも想像した通りのHTMLになります

```html
<html>
  <script>
    const head = document.createElement('head');
    head.insertAdjacentHTML('afterbegin', '<title>example</title>');
    const body = document.createElement('body');
    body.insertAdjacentHTML('afterbegin', '<div style="background-color:gray">BODY</div>');
    const html = document.getElementsByTagName('html')[0];
    html.insertAdjacentElement('beforeend', head);
    html.insertAdjacentElement('beforeend', body);
    console.log(html.innerHTML);
  </script>
</html>
```