JavaScriptで指定した位置にHTMLを差し込む方法

はじめに

カート決済システム等に他社のシステムを導入しており
この部分にこの要素を入れたいのに編集対象範囲外で編集できない…！！！
でも編集したい！！！！という時はありませんか？私は結構あります。
そんな時に役立つ、JSでHTMLを差し込むあれこれを備忘録も兼ねて記載します。

既存のシステムに新たな要素を差し込むことは、予期せぬ不具合につながる場合もあります。
編集する際は自己責任となりますので注意して作業に当たってください。

insertAdjacentHTMLメソッド

Element オブジェクトの insertAdjacentHTMLメソッドは
指定した文字列からノードを作成し追加することができます。使い方は次のとおりです。

element.insertAdjacentHTML(position, text);

2番目の引数に指定した文字列を HTML文として1番目の引数で指定した位置に追加します。
指定できる値は次の4つです。

ポジション名	追加位置
'beforebegin'	element の前に追加
'afterbegin'	element の子要素の先頭に追加
'afterbegin'	element の子要素の最後に追加
'afterend'	element の後に追加

挿入位置参考

<!-- beforebegin -->
<p>
<!-- afterbegin -->
sample
<!-- beforeend -->
</p>
<!-- afterend -->

サンプルコード

See the Pen Untitled by ippaimori (@ippaimori) on CodePen.

HTML

<div id="parent-div">
  <p id="child-p1">子要素１</p>
  <p id="child-p3">子要素３</p>
</div>

JS

const element = document.getElementById('child-p1');
element.insertAdjacentHTML('afterend', '<p id="child-p2">子要素2</p>');

outerHTML、innerHTML

ElementオブジェクトのouterHTML、innerHTMLはその要素自身と中身のHTMLを取得、変更するプロパティです。
使い方は次のとおりです。

outerHTML

const content = document.getElementById('content');
content.outerHTML = '<p>置き換える内容</p>';

//テンプレートリテラルを使用することで要素の前後にHTMLを追加することも簡単にできます
content.outerHTML = `<div>${content.outerHTML}</div>`;

囲みたい要素を取得して content に格納。
次に、content.outerHTML を使うことで、content 自身を別のHTMLで置き換えています。
outerHTMLプロパティは、その要素自身と中身のHTMLを含みます。
要素自身も含んでいるのがinnerHTMLプロパティとの違いです。

innerHTML

const content = document.getElementById( 'content' ) ;

content.innerHTML = '<p>置き換える内容</p>';

中身を置き換えたい要素を取得して content に格納。
次に、content.innerHTML を使うことで、contentの中身を別のHTMLで置き換えています。
innerHTMLプロパティは、その要素の中身がHTMLとして含まれています。
その要素自身は含まれません。

サンプルコード

See the Pen outerHTML by ippaimori (@ippaimori) on CodePen.

HTML

<div id="content">
  <p>元の文章</p>
</div>

JS

const content = document.getElementById('content');
content.outerHTML=`
<div>
    <h1>追加したタイトル</h1>
    ${content.outerHTML}
</div>
`;

おわりに

今回は私が使いやすそう〜！と思ったものをピックアップしてご紹介しました！
少しでもお役に立てれば幸いです！

参考

MDN element.insertAdjacentHTML
HTMLを表す文字列からノードを作成し指定の位置に追加(insertAdjacentHTML)
Element.innerHTML - 要素のHTMLを取得、変更する
Element.outerHTML - 自身と中身のHTMLを取得、変更する
jQueryの「$('#id').wrap('< div >')」をピュアJavaScriptで書きたい