html中にあるbrタグのあとに何か文字列やDOM要素を追加する方法を紹介します

本記事で紹介する動くサンプルの、共通部分のHTMLを先に載せておきます。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
hogehoge <br> fugafuga
</body>
</html>

以下の載せるスクリプトを上記のHTMLの下に置くと、brタグのあとにspanタグとともにaaaという文字列が挿入されます。

insertBeforeの利用

<script>
const mainElm = document.getElementById('main');
const brElms = mainElm.getElementsByTagName('br');

const span = document.createElement('span');
span.innerHTML = "aaa";

brElms[0].parentNode.insertBefore(span, brElms[0].nextSibling);
</script>

insertAdjacentHTMLを利用した場合

insertAdjacentHTML（）メソッドは、指定されたHTMLまたはXMLを、呼び出された要素を基準として所定の位置に挿入する方法です。

<script>
const mainElm = document.getElementById('main');
const brElms = mainElm.getElementsByTagName('br');

const span = document.createElement('span');
span.innerHTML = "aaa";

brElms[0].insertAdjacentHTML('afterend', span.outerHTML);
</script>

参考

insertAdjacentElementを利用した場合

insertAdjacentElement（）メソッドは、指定された要素ノードを、呼び出された要素を基準として所定の位置に挿入する方法です。

<script>
const mainElm = document.getElementById('main');
const brElms = mainElm.getElementsByTagName('br');

const span = document.createElement('span');
span.innerHTML = "aaa";

brElms[0].insertAdjacentElement('afterend', span);
</script>

参考