【jquery】HTML要素（DOM要素）を生成して、指定した要素に挿入する方法
2022.03.26
jqueryでHTML要素のli要素を新規作成して、ul要素に挿入してみます。
1. append
appendを使うと、作成された要素は、指定した要素内の一番下に挿入される。
jquery
<script>
jQuery( function( $ ) {
$('ul').append('<li>新規作成されたli</li>');
});
</script>HTML
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>実行結果
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>新規作成されたli</li>
</ul>- A
- B
- C
2. appendTo
appendToを使うとappendと同様に、作成された要素は、指定した要素内の一番下に挿入される。
jquery
<script>
jQuery( function( $ ) {
$('<li>新規作成されたli</li>').appendTo('ul');
});
</script>HTML
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>実行結果
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>新規作成されたli</li>
</ul>- A
- B
- C
3. prepend
prependを使うと、作成された要素は、指定した要素内の一番上に挿入される。
jquery
<script>
jQuery( function( $ ) {
$('ul').prepend('<li>新規作成されたli</li>');
});
</script>HTML
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>実行結果
<ul>
<li>新規作成されたli</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>- A
- B
- C
4. prependTo
prependToを使うとprependと同様に、作成された要素は、指定した要素内の一番上に挿入される。
jquery
<script>
jQuery( function( $ ) {
$('<li>新規作成されたli</li>').prependTo('ul');
});
</script>HTML
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>実行結果
<ul>
<li>新規作成されたli</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>- A
- B
- C