JavaScript/jQuery

jQueryで要素にappendとafterを使って追加する

更新日:

スポンサードリンク

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。いずれのメソッドも引数はDOM要素、jQueryオブジェクトなどが入ります。

以下両方のメソッドを使った比較サンプル。

<script type="text/javascript">
<!--
$(function(){
 var test1 = $("<div>").attr("id","test1").text("append1");
 var test2 = $("<div>").attr("id","test2").text("append2");
 var test3 = $("<div>").attr("id","test3").text("after");
 $("#test").append(test1);
 $("#test").append(test2);
 $("#test").after(test3);
});
-->
</script>
#test

idがtestの要素にappendを使ってidがtest1、同じくidがtest2の要素を加え、そののち、idがtest3の要素をafterを使ってtestの後に追加を行いました。

appendは要素の末尾に、afterは要素の後尾に追加されることが確認できました。

※上記のCSS

#test{
 background-color: red;
 width: 110px;
 height: 130px;
 padding: 10px 0 0 10px;
 margin: 0;
}
#test1{
 background-color: green;
 width: 100px;
 height: 40px;
 margin: 0 0 10px 0 ;
}
#test2{
 background-color: yellow;
 width: 100px;
 height: 40px;
}
#test3{
 background-color: orange;
 width: 120px;
 height: 120px;
 margin: 5px 0 0 0;
}
スポンサードリンク

-JavaScript/jQuery

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.