Help us understand the problem. What is going on with this article?

jQueryの基本まとめ - HTMLを操作しよう -

More than 3 years have passed since last update.

ゆるっとまとめ

テキストの変更取得

操作 使用例 備考
テキストの変更 $('A').text('hoge'); Aのテキストをhogeに変更
テキストの取得 $('A').text(); Aのテキストを取得

HTMLの変更取得

操作 使用例 備考
HTMLの変更 $('A').html('HTMLを記述'); AのHTMLを記述したHTMLに変更
HTMLの取得 $('A').html(); AのHTMLを取得

HTMLの挿入

操作 使用例 備考
要素内の先頭にHTMLを挿入 $('A').prepend('HTMLを記述'); A要素内の先頭に記述したHTMLを挿入
要素内の最後にHTMLを挿入 $('A').append('HTMLを記述'); A要素内の最後に記述したHTMLを挿入
要素の前にHTMLを挿入(同階層) $('A').before('HTMLを記述'); Aの前に記述したHTMLを挿入
要素の後にHTMLを挿入(同階層) $('A').after('HTMLを記述'); Aの後に記述したHTMLを挿入

HTMLの移動

操作 使用例 備考
要素内の先頭にHTMLを移動 $('A').prependTo('B'); A要素内の先頭に指定した要素Bを移動
要素内の最後にHTMLを移動 $('A').appendTo('B'); A要素内の最後に指定した要素Bを移動
要素の前にHTMLを移動(同階層) $('A').insertBefore('B'); Aの前に指定した要素Bを移動
要素の後にHTMLを移動(同階層) $('A').insertAfter('B'); Aの後に指定した要素Bを移動

要素の置き換え

操作 使用例 備考
指定した要素を他の要素に置き換える $('A').replaceWith('B'); A要素をB要素に置き換え

要素の削除

操作 使用例 備考
指定した要素を削除 $('A').remove(); A要素を削除

他の要素で包む

操作 使用例 備考
要素を指定した要素で個別に包む $('A').wrap('B'); A要素をBで個別に包む
要素を指定した要素でまるっと包む $('A').wrapAll('B'); A要素をBでまるっと包む
要素の中身を別の要素で包む $('A').wrapInner('B'); A要素の中身がBで包まれる

属性値の操作

操作 使用例 備考
要素の属性値を取得 $('A').attr('B'); A要素の属性値Bを取得
要素の属性値を変更 $('A').attr('B', 'C'); A要素の属性値BをCに変更
要素の属性値を削除 $('A').removeAttr('B'); A要素の属性値Bを削除

class属性の操作

操作 使用例 備考
class属性の追加 $('A').addClass('B'); A要素にBというclassを追加
class属性の削除 $('A').removeClass('B'); A要素からBというclassを削除

CSSの操作

操作 使用例 備考
CSSの設定 $('A').css('color', 'red'); A要素の色を赤に設定
CSSの取得 $('A').css('color'); A要素の色を取得


テキストの変更取得

text

テキストの変更

$(function(){
  $('#target').text('fuga');
});

テキストの取得

$(function(){
  var hoge = $('#target').text();
  console.log(hoge);
});


HTMLの変更取得

html

HTMLの変更

$(function(){
  $('#target').html('aaaa<span>hogehoge</span>');
});

HTMLの取得

$(function(){
  var hoge = $('#target').html();
  console.log(hoge);
});


HTMLの挿入

prepend

指定した要素内の先頭にHTMLを挿入

$(function(){
  $('#target').prepend('<span>要素内の先頭に挿入</span>');
});
<p id="target"><span>要素内の先頭に挿入</span>ターゲットだゆん</p>

append

指定した要素内の最後にHTMLを挿入

$(function(){
  $('#target').append('<span>要素内の最後に挿入</span>');
});
<p id="target">ターゲットだゆん<span>要素内の最後に挿入</span></p>

before

指定した要素の前にHTMLを挿入 (同階層)

$(function(){
  $('#target').before('<p>前に挿入</p>');
});
<p>前に挿入</p>
<p id="target">ターゲットだゆん</p>

after

指定した要素の後にHTMLを挿入 (同階層)

$(function(){
  $('#target').after('<p>後ろに挿入</p>');
});
<p id="target">ターゲットだゆん</p>
<p>後ろに挿入</p>


HTMLの移動

prependTo

指定した要素を他の要素内の先頭に移動

$(function(){
  $('#target').prependTo('#hoge');
});
[ before ]
<p id="hoge">テキストテキスト</p>
<span id="target">要素内の先頭に移動される要素</span>


[ after ]
<p id="hoge"><span id="target">先頭に移動される要素</hoge>テキストテキスト</p>

appendTo

指定した要素を他の要素内の最後に移動

$(function(){
  $('#target').appendTo('#hoge');
});
[ before ]
<p id="hoge">テキストテキスト</p>
<span id="target">要素内の最後に移動される要素</span>


[ after ]
<p id="hoge">テキストテキスト<span id="target">要素内の最後に移動される要素</hoge></p>

insertBefore

指定した要素を他の要素の前に移動 (同階層)

$(function(){
  $('#target').insertBefore('#hoge');
});
[ before ]
<p id="hoge">テキストテキスト</p>
<span id="target">前に移動される要素</span>


[ after ]
<span id="target">前に移動される要素</span>
<p id="hoge">テキストテキスト</p>

insertAfter

指定した要素を他の要素の後に移動 (同階層)

$(function(){
  $('#target').insertAfter('#hoge');
});
[ before ]
<span id="target">後に移動される要素</span>
<p id="hoge">テキストテキスト</p>


[ after ]
<p id="hoge">テキストテキスト</p>
<span id="target">後に移動される要素</span>


replaceWith

指定した要素を他の要素に置き換える

$(function(){
  $('#target').replaceWith('<h1></h1>');
});
[ before ]
<span id="target">テキスト</span>

[ after ]
<h1>テキストテキスト</h1>


要素の削除

remove

指定した要素を削除する

$(function(){
  $('h1 #target').remove();
});
[ before ]
<h1>
    テキストテキスト
    <span id="target">削除される要素</span>
</h1>

[ after ]
<h1>テキストテキスト</h1>


他の要素で包む

wrap

要素を指定した要素で包む

複数の要素が存在する場合は、各要素が個別にそれぞれ包まれる
※ 既にDOMに存在する要素で包むことも出来る

$(function(){
  $('.hoge').wrap('<div class="wrap"></div>');
});
[ before ]
<p class="hoge">テキストテキスト</p>
<p class="hoge">テキストテキスト</p>

[ after ]
<div class="wrap">
    <p class="hoge">テキストテキスト</p>
</div>
<div class="wrap">
    <p class="hoge">テキストテキスト</p>
</div>

wrapAll

複数存在する要素を指定した要素でまるっと包む

※ 既にDOMに存在する要素で包むことも出来る

$(function(){
  $('.hoge').wrapAll('<div class="wrap"></div>'); 
});
[ before ]
<p class="hoge">テキストテキスト</p>
<p class="fuga">間にある別の要素やテキストは除外され、下に移動する</div>
<p class="hoge">テキストテキスト</p>

[ after ]
<div class="wrap">
    <p class="hoge">テキストテキスト</p>
    <p class="hoge">テキストテキスト</p>
</div>
<p class="fuga">間にある別の要素やテキストは除外され、下に移動する</div>

wrapInner

指定した要素の中身(子要素)を別の要素で包む

※ 既にDOMに存在する要素で包むことも出来る

$(function(){
  $('.hoge').wrapInner('<strong></strong>'); 
});
[ before ]
<p class="hoge">テキストテキスト</p>
<p class="hoge">テキストテキスト</p>

[ after ]
<p class="hoge"><strong>テキストテキスト</strong></p>
<p class="hoge"><strong>テキストテキスト</strong></p>


属性値の操作

attr

要素の属性値を取得する

attr('属性名');

$(function(){
  $(a.targetLink).attr('href'); // リンク先を取得
});

要素の属性値を変更する

attr('属性名', '属性値');

$(function(){
  $(a.targetLink).attr('href', 'https://www.google.co.jp/'); // リンク先をGoogleに変更
});

removeAttr

要素の属性値を削除する

removeAttr('属性名');

$(function(){
  $(a.targetLink).removeAttr('href'); // リンクを削除
});


class属性の操作

addClass

class属性の追加

複数のクラスを追加したい場合は、スペース区切り

$(function(){
  $('.target').addClass('fuga hoge'); // target要素に新たにfuga,hogeのクラスを追加
});

removeClass

class属性の削除

複数のクラスを削除したい場合は、スペース区切り

$(function(){
  $('.target').removeClass('fuga hoge'); // target要素からfuga,hogeのクラスを削除
});


CSSの操作

CSSの設定

css('プロパティ名', '値');

$(function(){
  $('.target').css('color', 'red'); // target要素の色を赤に設定
});


※ 複数のCSSを同時に設定したい場合

ここではプロパティ名にシングルクォーテーション(ダブルクォーテーション)はつかない

css({
プロパティ名, '値',
プロパティ名, '値',
プロパティ名, '値'
});

$(function(){
  $('.target').css({
    color: 'white',
    fontWeight: 'bold',
    backgroundColor: 'black'    
  });
});


CSSの取得

css('プロパティ名');

$(function(){
  $('.target').css('color'); // target要素の色を取得
});
mi_upto
お肉とお寿司とわんこが好きです。 twitter : https://twitter.com/mi_upto
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした