jQuery HTML系メソッド

html

セレクタで指定した要素の中で，最初の要素のHTMLコンテンツを取得または設定する．
取得

//基本形
const content = $('selector').html();

//例
const content = $('p').html(); //取得

設定

//基本形
$('selector').html('newContent');

//例
$('div').html('<p>追加内容</p>');

• selector：取得または設定したい要素を指定する．
• newContents：追加したいコンテンツを指定する．HTMLタグは識別できる．

text

セレクタで指定した要素のテキストデータを取得または設定を行う．
取得

//基本形
const content = $('selector').text();

//例
const content = $('p').text();

設定

//基本形
$('selector').text('newContent');

//例
$('p').text('HelloWorld');

• selector：取得または設定したい要素を指定する．
• newContent：追加したいコンテンツを指定する．HTMLタグは識別されないため，HTMLタグを書いてもそのまま出力される．

htmlとtextの違い

２つはどちらも，要素を取得したり，設定するために利用することができるメソッドであるが，少し異なる．

	取得・設定する要素	HTMLタグの識別
html	上から該当する最初の要素のみ	する
text	該当する全ての要素	しない

append

セレクタで指定した要素の中で最後に要素を追加する．

//基本形
$('selector').append('newContent');

//例
$('div').append('<p>Hello，　World</p>');

/*結果
<div>
    <p>元からある要素</p>
    <p>Hello,World</p>
</div>
*/

• selector：追加する要素を入れる要素を指定する．
• newContent：追加したいコンテンツを指定する．(HTMLタグは識別される)

prepend

セレクタで指定した要素の中で最初に要素を追加する．

//基本形
$('selector').prepend('newContent');

//例
$('div').prepend('<p>Hello，　World</p>');

/*結果
<div>
    <p>Hello,World</p>
    <p>元からある要素</p>
</div>
*/

• selector：追加する要素を入れる要素を指定する．
• newContent：追加したいコンテンツを指定する．(HTMLタグは識別される)

after

セレクタで指定した要素の後ろに要素を追加する．

//基本形
$('selector').after('newContent');

//例
$('div').after('<p>Hello，　World</p>');

/*結果
<div>
    <p>元からある要素</p>
</div>
<p>Hello,World</p>
*/

• selector：どの要素の後ろに追加するかを指定する．
• newContent：追加したいコンテンツを指定する．(HTMLタグは識別される)

before

セレクタで指定した要素の前に要素を追加する．

//基本形
$('selector').before('newContent');

//例
$('div').before('<p>Hello，　World</p>');

/*結果
<p>Hello,World</p>
<div>
    <p>元からある要素</p>
</div>
*/

• selector：どの要素の前に追加するかを指定する．
• newContent：追加したいコンテンツを指定する．(HTMLタグは識別される)

insertAfter

セレクタで指定した要素を，引数で指定した要素の後ろに追加する．
afterとはセレクタとコンテンツの順番が逆である．

//基本形
$('newContent').insertAfter('selector');

//例
$('<p>helloWorld</p>').insertAfter('div');

• selector：どの要素の後ろに追加するかを指定する．
• newContent：追加したいコンテンツを指定する．(HTMLタグは識別される)

insertBefore

セレクタで指定した要素を，引数で指定した要素の前に追加する．
beforeとはセレクタとコンテンツの順番が逆である．

//基本形
$('newContent').insertBefore('selector');

//例
$('<p>helloWorld</p>').insertBefore('div');

• selector：どの要素の前に追加するかを指定する．
• newContent：追加したいコンテンツを指定する．(HTMLタグは識別される)

remove

//基本形
$('selector').remove();
$('selector').remove('contains:("content")');//要素の中身で削除する要素を指定する　

//例
$('p').remove();
$('p').remove('contains:("Hello")');//"Hello"を含むp要素を削除

• selector：削除したい要素を指定する．該当するもの全てを削除する．
• contains()：含んでいる文字列で削除する要素を指定する．

empty

セレクタで指定した要素の小要素を全て削除する

//基本形
$('selector').empty();

//例
$('div').empty();

/*結果
<div>
    <p>元からある要素</p>
</div>
↓
<div>
</div>
*/

• selector：削除したい小要素を含む親要素を指定する．親要素自体は残る．

wrap

指定した要素を，指定した新たなタグ要素で囲む．

//基本形
$('selector').wrap('tagName');

//例
$('p').wrap('<div class='wrap'><div>');

• selector：囲みたい要素，コンテンツを指定する．
• tagName：指定した要素を何で囲むかを指定する．

unwrap

wrapの逆で，指定した要素を囲む親要素を削除する．

//基本形
$('selector').unwrap();

//例
$('p').unwrap(); //p要素を囲む親要素を削除する．

• selector：削除したい親要素の中にある小要素を指定する．

clone

指定した要素をコピーする．

//基本形
const copy = $('selector').clone(論理値); //論理値がtrueでコピーを取得

//例
const copy = $('selector').clone(true);
copy.appendTo('div'); //コピーした要素を複製

• selector：コピーしたい要素を指定．
• 論理値：true→完全にコピー，false→一部だけコピー

replaceWith

指定した要素を新たに指定した要素に置き換える．

//基本形
$('selector').replaceWith('contents');

//例
$('div').replaceWith('<p>HelloWorld</p>');

/*結果
<div>
    <p>元の要素</p>
</div>
↓
<p>HelloWorld</p>
*/

• selector：置き換え先の要素を指定する．
• contents：置き換え後の要素を指定する．

replaceAll

指定した要素を新たに指定した要素に置き換える．
replaceWithとは要素の指定する順番が逆となる．

//基本形
$('contents').replaceWith('selector');

//例
$('<p>HelloWorld</p>').replaceWith('div');

• selector：置き換え先の要素を指定する．
• contents：置き換え後の要素を指定する．

contents

指定した要素の小要素，テキストノード，コメントノードを取得する．

//基本形
const content = $('selector').contents();

//例
const allContents = $('div').contents();

/*HTMLの例
<div>
  テキストノード
  <p>小要素</p>
  <!-- コメントノード  -->
</div>
*/

/*結果
allContents = 
[ テキストノード, <p>小要素</p>, <!-- コメントノード  --> ]
*/

• selector：小要素・テキストノード・コメントノードを取得したい要素を指定する．

contentsメソッドは，取得したコンテンツを配列として返す．

offset

指定した要素の表示座標を取得する．
左上を原点としたX・Y座標を取得することができる．

//基本形
const position = $('selector').offset();

//例
const position = $('p').offset();
console.log(position);

//出力結果=>{"top":⚪︎⚪︎, "left":⚪︎⚪︎}

• selector：X・Y座標を取得したい要素を指定する．

出力結果のtopはY座標，leftはX座標を表す．

position

指定した要素の表示座標を取得する.
親要素を原点としたX・Y座標を取得することができる．

//基本形
const position = $('selector').position();

//例
const position = $('p').position();
console.log(position);

//出力結果=>{"top":⚪︎⚪︎, "left":⚪︎⚪︎}

• selector：X・Y座標を取得したい要素を指定する．

scrollTop

要素内の垂直スクロールの位置を取得または設定する．
取得

//基本形
var ScrollPosition = $(selector).scrollTop();

//例
var ScrollPosition = $('window').scrollTop(); //画面の垂直スクロール位置を取得

設定

//基本形
$(selector).scrollTop(数値);

//例
$('window').scrollTop(200); //画面のスクロール位置を設定

• selector：垂直スクロールの位置を取得または設定したい要素を指定する．
• 数値：垂直スクロールさせるピクセル数を指定する．

取得するデータや設定する数値はピクセル数となる．
一般的に画面のスクロール位置を取得・設定する場合の対象要素はwindowである．

scrollLeft

要素内の水平スクロールの位置を取得または設定する．
取得

//基本形
var ScrollPosition = $(selector).scrollLeft();　

//例
var ScrollPosition = $('window').scrollLeft();

設定

//基本形
$(selector).scrollLeft(数値);

//例
$('window').scrollLeft(200);

• selector：水平スクロールの位置を取得または設定したい要素を指定する．
• 数値：水平スクロールさせるピクセル数を指定する．

scrollTopと同様に，取得するデータや設定する数値はピクセル数となる．
一般的に画面のスクロール位置を取得・設定する場合の対象要素はwindowである．