トップページ >  jQuery >  jQueryのappend()
初版2014/03/15： 最終更新日2014/03/15
jQueryのappend()
目次
・jQueryのappend()
jQueryのappend()
jQueryのappend()はブロック要素の中に要素を追加します。
$("#id").append()と言うように記述します。以下、例です。

 

<ul id="test">
</ul>

上記から以下のように動的にli要素が追加されます。

<ul id="test">
<li></li>
</ul>

以下、appendのソースです。

<script type="text/javascript">
$(function(){
  $("#btn1").click(function(){
    $("#test").append("<li>");
  });
  $("#btn2").click(function(){
    $("#test").empty();
  });
});
</script>

動的に追加したli要素にa要素を追加したい場合、html()を使用します。
li要素追加時にidを指定して、html要素追加時にliのidを指定して要素追加します。
以下、liを押してからhtmlを押下してください。

  
<ul id="test2">
<li></li>
</ul>

以下、liとhtmlのソースです。

$(function(){ 
  $("#btn3").click(function(){
    $("#test2").append("<li id='li1'>");
    $("#btn3").attr("disabled",true);
  });
  
  $("#btn4").click(function(){
    $("#li1").append("<a>aaa</a>");
  });
});

HOME