brタグのあとに要素を追加する
brタグのあとに要素を追加する:
html中にあるbrタグのあとに何か文字列やDOM要素を追加する方法を紹介します
本記事で紹介する動くサンプルの、共通部分のHTMLを先に載せておきます。
以下の載せるスクリプトを上記のHTMLの下に置くと、brタグのあとにspanタグとともに
insertAdjacentHTML（）メソッドは、指定されたHTMLまたはXMLを、呼び出された要素を基準として所定の位置に挿入する方法です。
参考
insertAdjacentElement（）メソッドは、指定された要素ノードを、呼び出された要素を基準として所定の位置に挿入する方法です。
参考
html中にあるbrタグのあとに何か文字列やDOM要素を追加する方法を紹介します
本記事で紹介する動くサンプルの、共通部分のHTMLを先に載せておきます。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> hogehoge <br> fugafuga </body> </html>
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>
コメント
コメントを投稿