jqueryのＤＯＭ操作

append()

$(document.body).append(～) エレメントの追加(1)サンプルを見る
$("#main").append(～)

  $(function(){
    $(document.body).append($
      ("<img src='img/200906281536.jpg' width='160' height='160' >"));
  });

$(document.body).append(～) エレメントの追加(2)サンプルを見る

  $(function(){
    $(document.body).append($
      ("<img>").attr("src", "img/200906281536.jpg").attr("width",160)
      .attr("height",160));
  });

$(document.body).append(～) エレメントの追加(3)サンプルを見る

  $(function(){
    $(document.body).append($
      ("<div>jquery<b>サンプル</b></div>"));
  });

after()

$("#main").after(～) エレメントの後に追加サンプルを見る

  $(function(){
    var imgtag = 
      $("<img>").attr("src", "img/200906281536.jpg").attr("width",160)
      .attr("height",160);
    $("#main").after(imgtag);
  });

before()

$("#main").before(～) エレメントの前に追加サンプルを見る

  $(function(){
    var imgtag = 
      $("<img>").attr("src", "img/200906281536.jpg").attr("width",160)
      .attr("height",160);
    $("#main").before(imgtag);
  });

prepend()

$("#main").prepend(～) エレメントの先頭に追加サンプルを見る

  $(function(){
    var imgtag = 
      $("<img>").attr("src", "img/200907231248_s.jpg").attr("width",20)
      .attr("height",20);
    $("#main li").prepend(imgtag);
  });

wrap()

$("#main").wrap(～) エレメントで囲むサンプルを見る

.imgframe {
  background-color: yellow;
  padding: 8px;
  border: 6px solid pink;
  margin: 2px;
}

  $(function(){
    $("img").wrap("<div>").addClass("imgframe");
  });

peplaceWith()

$("#main").replaceWith(～) エレメントの置換サンプルを見る

  $(function(){
    $("#btn").click(function(){
      $("#count").replaceWith("<span>"+$("#count").val()+"</span>");
    });
  });

clone()

$("#main").clone(～) エレメントの複製サンプルを見る

  $(function(){
    $("#btn").click(function(){
      var dup = $("#product").clone();
      dup.attr("id","product"+Math.floor(Math.random()*999999));
      $(document.body).append(dup);
    });
  });

remove()

$("img").remove(～) エレメントの削除サンプルを見る

  $(function(){
    $("#btn").click(function(){
      $("img").remove("[width=80]");
    });
  });