WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

HTMLの1部を別ファイルから読み込みパーツ化する方法

このページではHTMLをパーツ化する方法をご紹介させていただきます。phpのincludeのようなことをJavaScriptで意外と簡単に行うことができます!

また、head内のstyleタグなどを別ファイルからhtmlに挿入する方法はこちらのページにて紹介しています。

使用するオブジェクト

insertAdjacentHTMLHTML要素を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] + [ @ ]