クレジットカード決済用JavaScript準備⑤JavaScriptでinsertAdjacentHTMLメソッドを使ってHTML要素を追加する

2917 ワード
,javascript Rails Rails テキストリンク
app/javascript/card.js
    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} name='token'>`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
        debugger;

1.${～} の中には、変数や計算式を入れることができる！

これはRailsの式展開と同じで文字列の中で計算ができる。変数が使える。

2.メイン：HTML要素を追加

insertAdjacentHTMLメソッドとは

HTMLを差し込む基準になるElementに対して、.insertAdjacentHTML( )と記述することで使えます。第1引数に差し込む位置の指定をする文字列、第2引数に差し込むHTMLを渡します。

第１引数 挿入位置
beforebegin Elementのタグの上に挿入します。
afterbegin Elementタグの中の最初に挿入します。
beforeend Elementタグの中の最後に挿入します。
afterend Elementのタグの下に挿入します。

ちなみにinnerHTMLはまるごと差し替える場合に使うという認識でOK

デバグ

debuggerステートメント
基本的にはブレークポイントを追加します。
*プログラマに必要とされるスキルはいくつかありますが、その中でもエラーの原因をすばやく突き止めることができる、デバッグのスキルは非常に重要なスキルのひとつです。