【jQuery】要素の追加方法(要素内のはじめ、後ろ、要素外のはじめ、後ろや要素を包む方法も)

追加するポ
この記事は約3分で読めます。
広告

いつもjQueryで要素を追加する時に検索してトップに出てくるキータを見ています。
いつもいつもありがとうございます!
そのキータのページではGIFかmp4で要素を追加した様子を流していてわかりやすいのですが
実際にボタンを押して動かす方がさらに分かりやすい!と思って作ってみました。
よく見たらgithubにそのまま上がっていましたが、せっかく書いたし見てくれたら嬉しいです!

要素内の始め(最初)に追加|prepend()

$('ul').prepend('<li>one</li>');
要素内の始めに追加
<ul> 

  •  <li>two</li>
  •  <li>three</li>

</ul>

要素内の後ろ(最後)に追加|append()

$('ul').append('<li>three</li>');
要素内の後ろに追加
<ul> 

  •  <li>one</li>
  •  <li>two</li>

</ul>

要素外の始め(最初)に追加|before()

$('ul').before('<p>other</p>');
要素外の始めに追加
  • <ul>
  •  <li>one</li>
  •  <li>two</li>
  •  <li>three</li>
  • </ul>

要素外の後ろ(最後)に追加|after()

$('ul').after('<p>other</p>');
要素外の後ろに追加
  • <ul>
  •  <li>one</li>
  •  <li>two</li>
  •  <li>three</li>
  • </ul>

要素すべてを包む|wrapAll()

$('p').wrapAll('<div class="wrap"></div>');
要素すべてを包む

<p>one</p>

<p>two</p>

<p>three</p>

個々に要素を包む|wrap()

$('p').wrap('<div class="wrap"></div>');
個々に要素を包む

<p>one</p>

<p>two</p>

<p>three</p>

要素の中を包む|wrapInner()

$('p').wrapInner('<span></span>');
要素の中を包む

one

two

three

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQuery

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました