HTML
JavaScript

insertAdjacentHTMLが期待通りに動かない


概要

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

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


表示

スクリーンショット 2019-03-14 16.08.55.png


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)


表示

スクリーンショット 2019-03-14 16.16.23.png


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


表示

スクリーンショット 2019-03-14 16.18.16.png


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>