概要

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

コード

<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 ビット）

表示

console.log

出力されたままだと見づらいので整形だけしました
scriptタグがheadタグで囲まれていますが、挿入した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)

表示

console.log

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

<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 ビット)

表示

console.log

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

<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>
  <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>