このページではHTMLをパーツ化する方法をご紹介させていただきます。phpのincludeのようなことをJavaScriptで意外と簡単に行うことができます!
また、head内のstyleタグなどを別ファイルからhtmlに挿入する方法はこちらのページにて紹介しています。
使用するオブジェクト
insertAdjacentHTML | HTML要素をJavaScriptから追加する |
beforebegin:指定した要素の「前」に挿入する | |
afterbegin:指定した要素の直下の「前」に挿入 | |
beforeend:指定した要素の直下の「後」に挿入 | |
afterend:指定した要素の「後」に挿入する |
insertAdjacentHTML 書き方例
const $box = document.getElementById('box');
$box.insertAdjacentHTML('afterbegin' , '<p>テキスト</p>');
バッククオートでjsファイル内で改行ができるようになる!
JavaScript内では、改行を行うとエラーになってしまいますが、バッククオーとで囲んでいるものに関してはエラーになりません。
バッククオートの出し方
・Mac:USキーボードの場合は[ Option ] + [ ~ ]
・Mac:JISキーボードの場合は [ Shift] + [ @ ]
・Windows:[ Shift] + [ @ ]