jQuery利用例:HTMLコンテンツを挿入する

goto_jp 326views 更新:2014年6月2日

サンプルはこちら。

See the Pen Bgyct by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

各ボタンより対象の前後と中にHTMLを挿入できます。

JavaScript

$(function(){

  $(".before").click(function(){
    $("#target").before("<p>ビフォー</p>");
  });

    $(".append").click(function(){
    $("#target").append("<p>アペンド</p>");
  });

    $(".after").click(function(){
    $("#target").after("<p>アフター</p>");
  });

});

ボタンごとに関数を用意しています。

「before()」は対象の前に、「append()」は対象の中に、「after()」は対象の後にHTMLを挿入します。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません