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

サンプルはこちら。

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を挿入します。