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>