要素内にHTMLを挿入

2024 7/30

2024.05.12 2024.07.30

記事の内容

append

appendメソッドは、HTML要素の末尾に指定したコンテンツを追加するための便利なメソッドです。

append

記法

$(“対象要素”).append(“内容”);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>appendについて</title>
  </head>
  <body>
    <p>入力してから追加ボタンを押してね！</p>
    <input type="text" id="inputText" />
    <button id="addBtn">追加</button>
    <button id="resetBtn">リセット</button>
    <ul></ul>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

// ページの読み込みが完了
$(function () {
  // 追加ボタンのイベントハンドラ
  $("#addBtn").click(function () {
    // インプットの値を取得し、前後の空白をトリム
    var inputText = $("#inputText").val().trim();
    // インプットに値がある場合のみ処理を行う
    if (inputText !== "") {
      // インプットの値をリストに追加
      $("ul").append("<li>" + inputText + "</li>");
      // インプットを空にする
      $("#inputText").val("");
    } else {
      // 入力が空の場合、アラートメッセージを表示
      alert("入力が空です。テキストを入力してください。");
    }
  });

  // リセットボタンのイベントハンドラ
  $("#resetBtn").click(function () {
    // リストを空にする
    $("ul").empty();
  });
});

出力結果

入力してから追加ボタンを押してね！

prepend

prependメソッドは、HTML要素の先頭に指定したコンテンツを追加するための便利なメソッドです。

prepend

記法

$(“対象要素”).prepend(“内容”);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>prependについて</title>
  </head>
  <body>
    <p>入力してから追加ボタンを押してね！</p>
    <input type="text" id="inputText" />
    <button id="addBtn">追加</button>
    <button id="resetBtn">リセット</button>
    <ul></ul>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

// ページの読み込みが完了
$(function () {
  // 追加ボタンのイベントハンドラ
  $("#addBtn").click(function () {
    // インプットの値を取得し、前後の空白をトリム
    var inputText = $("#inputText").val().trim();
    // インプットに値がある場合のみ処理を行う
    if (inputText !== "") {
      // インプットの値をリストに追加
      $("ul").prepend("<li>" + inputText + "</li>");
      // インプットを空にする
      $("#inputText").val("");
    } else {
      // 入力が空の場合、アラートメッセージを表示
      alert("入力が空です。テキストを入力してください。");
    }
  });

  // リセットボタンのイベントハンドラ
  $("#resetBtn").click(function () {
    // リストを空にする
    $("ul").empty();
  });
});

出力結果

入力してから追加ボタンを押してね！