jQuery HTML系メソッド

# html
セレクタで指定した要素の中で，最初の要素のHTMLコンテンツを取得または設定する．
**取得**
```javascript
//基本形
const content = $('selector').html();

//例
const content = $('p').html(); //取得
```
**設定**
```javascript
//基本形
$('selector').html('newContent');

//例
$('div').html('<p>追加内容</p>');
```
- <font color="DarkTurquoise">`selector`</font>：取得または設定したい要素を指定する．
- <font color="DarkTurquoise">`newContents`</font>：追加したいコンテンツを指定する．HTMLタグは識別できる．

# text
セレクタで指定した要素のテキストデータを取得または設定を行う．
**取得**
```javascript
//基本形
const content = $('selector').text();

//例
const content = $('p').text();
```
**設定**
```javascript
//基本形
$('selector').text('newContent');

//例
$('p').text('HelloWorld');
```
- <font color="DarkTurquoise">`selector`</font>：取得または設定したい要素を指定する．
- <font color="DarkTurquoise">`newContent`</font>：追加したいコンテンツを指定する．HTMLタグは識別されないため，HTMLタグを書いてもそのまま出力される．

## htmlとtextの違い
２つはどちらも，要素を取得したり，設定するために利用することができるメソッドであるが，少し異なる．
||取得・設定する要素|HTMLタグの識別|
|:--:|:--:|:--:|
|`html`|上から該当する最初の要素のみ|する|
|`text`|該当する全ての要素|しない|

# append
セレクタで指定した要素の<font color="red">中</font>で<font color="blue">最後</font>に要素を追加する．
```javascript
//基本形
$('selector').append('newContent');

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

/*結果
<div>
    <p>元からある要素</p>
    <p>Hello,World</p>
</div>
*/
```
- <font color="DarkTurquoise">`selector`</font>：追加する要素を入れる要素を指定する．
- <font color="DarkTurquoise">`newContent`</font>：追加したいコンテンツを指定する．(HTMLタグは識別される)

# prepend
セレクタで指定した要素の<font color="red">中</font>で<font color="blue">最初</font>に要素を追加する．
```javascript
//基本形
$('selector').prepend('newContent');

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

/*結果
<div>
    <p>Hello,World</p>
    <p>元からある要素</p>
</div>
*/
```
- <font color="DarkTurquoise">`selector`</font>：追加する要素を入れる要素を指定する．
- <font color="DarkTurquoise">`newContent`</font>：追加したいコンテンツを指定する．(HTMLタグは識別される)

# after
セレクタで指定した要素の<font color="red">後ろ</font>に要素を追加する．
```javascript
//基本形
$('selector').after('newContent');

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

/*結果
<div>
    <p>元からある要素</p>
</div>
<p>Hello,World</p>
*/
```
- <font color="DarkTurquoise">`selector`</font>：どの要素の後ろに追加するかを指定する．
- <font color="DarkTurquoise">`newContent`</font>：追加したいコンテンツを指定する．(HTMLタグは識別される)

# before
セレクタで指定した要素の<font color="red">前</font>に要素を追加する．
```javascript
//基本形
$('selector').before('newContent');

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

/*結果
<p>Hello,World</p>
<div>
    <p>元からある要素</p>
</div>
*/
```
- <font color="DarkTurquoise">`selector`</font>：どの要素の前に追加するかを指定する．
- <font color="DarkTurquoise">`newContent`</font>：追加したいコンテンツを指定する．(HTMLタグは識別される)

# insertAfter
セレクタで指定した要素を，引数で指定した要素の<font color="red">後ろ</font>に追加する．
`after`とはセレクタとコンテンツの順番が逆である．
```javascript
//基本形
$('newContent').insertAfter('selector');

//例
$('<p>helloWorld</p>').insertAfter('div');
```
* <font color="DarkTurquoise">`selector`</font>：どの要素の後ろに追加するかを指定する．
* <font color="DarkTurquoise">`newContent`</font>：追加したいコンテンツを指定する．(HTMLタグは識別される)

# insertBefore
セレクタで指定した要素を，引数で指定した要素の<font color="red">前</font>に追加する．
`before`とはセレクタとコンテンツの順番が逆である．
```javascript
//基本形
$('newContent').insertBefore('selector');

//例
$('<p>helloWorld</p>').insertBefore('div');
```
- <font color="DarkTurquoise">`selector`：どの要素の前に追加するかを指定する．
- <font color="DarkTurquoise">`newContent`：追加したいコンテンツを指定する．(HTMLタグは識別される)

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

//例
$('p').remove();
$('p').remove('contains:("Hello")');//"Hello"を含むp要素を削除
```
- <font color="DarkTurquoise">`selector`</font>：削除したい要素を指定する．該当するもの全てを削除する．
- <font color="DarkTurquoise">`contains()`</font>：含んでいる文字列で削除する要素を指定する．

# empty
セレクタで指定した要素の小要素を全て削除する
```javascript
//基本形
$('selector').empty();

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

/*結果
<div>
    <p>元からある要素</p>
</div>
↓
<div>
</div>
*/
```
- <font color="DarkTurquoise">`selector`</font>：削除したい小要素を含む親要素を指定する．親要素自体は残る．

# wrap
指定した要素を，指定した新たなタグ要素で囲む．
```javascript
//基本形
$('selector').wrap('tagName');

//例
$('p').wrap('<div class='wrap'><div>');
```
- <font color="DarkTurquoise">`selector`</font>：囲みたい要素，コンテンツを指定する．
- <font color="DarkTurquoise">`tagName`</font>：指定した要素を何で囲むかを指定する．

# unwrap
wrapの逆で，指定した要素を囲む親要素を削除する．
```javascript
//基本形
$('selector').unwrap();

//例
$('p').unwrap(); //p要素を囲む親要素を削除する．
```
- <font color="DarkTurquoise">`selector`</font>：削除したい親要素の中にある小要素を指定する．

# clone
指定した要素をコピーする．
```javascript
//基本形
const copy = $('selector').clone(論理値); //論理値がtrueでコピーを取得

//例
const copy = $('selector').clone(true);
copy.appendTo('div'); //コピーした要素を複製
```
- <font color="DarkTurquoise">`selector`</font>：コピーしたい要素を指定．
- <font color="DarkTurquoise">`論理値`</font>：true→完全にコピー，false→一部だけコピー

# replaceWith
指定した要素を新たに指定した要素に置き換える．
```javascript
//基本形
$('selector').replaceWith('contents');

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

/*結果
<div>
    <p>元の要素</p>
</div>
↓
<p>HelloWorld</p>
*/
```
* <font color="DarkTurquoise">`selector`</font>：置き換え先の要素を指定する．
* <font color="DarkTurquoise">`contents`</font>：置き換え後の要素を指定する．

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

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

//例
$('<p>HelloWorld</p>').replaceWith('div');
```
- <font color="DarkTurquoise">`selector`</font>：置き換え先の要素を指定する．
- <font color="DarkTurquoise">`contents`</font>：置き換え後の要素を指定する．

# contents
指定した要素の小要素，テキストノード，コメントノードを取得する．
```javascript
//基本形
const content = $('selector').contents();

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

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

/*結果
allContents = 
[ テキストノード, <p>小要素</p>, <!-- コメントノード  --> ]
*/
```
* <font color="DarkTurquoise">`selector`</font>：小要素・テキストノード・コメントノードを取得したい要素を指定する．

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

# offset
指定した要素の表示座標を取得する．
<font color="red">左上を原点</font>としたX・Y座標を取得することができる．
```javascript
//基本形
const position = $('selector').offset();

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

//出力結果=>{"top":⚪︎⚪︎, "left":⚪︎⚪︎}
```
- <font color="DarkTurquoise">`selector`</font>：X・Y座標を取得したい要素を指定する．

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

# position
指定した要素の表示座標を取得する.
<font color="red">親要素を原点</font>としたX・Y座標を取得することができる．
```javascript
//基本形
const position = $('selector').position();

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

//出力結果=>{"top":⚪︎⚪︎, "left":⚪︎⚪︎}
```
- <font color="DarkTurquoise">`selector`</font>：X・Y座標を取得したい要素を指定する．

# scrollTop
要素内の垂直スクロールの位置を取得または設定する．
**取得**
```javascript
//基本形
var ScrollPosition = $(selector).scrollTop();

//例
var ScrollPosition = $('window').scrollTop(); //画面の垂直スクロール位置を取得
```
**設定**
```javascript
//基本形
$(selector).scrollTop(数値);

//例
$('window').scrollTop(200); //画面のスクロール位置を設定
```
- <font color="DarkTurquoise">`selector`</font>：垂直スクロールの位置を取得または設定したい要素を指定する．
- <font color="DarkTurquoise">`数値`</font>：垂直スクロールさせるピクセル数を指定する．

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

# scrollLeft
要素内の水平スクロールの位置を取得または設定する．
**取得**
```javascript
//基本形
var ScrollPosition = $(selector).scrollLeft();　

//例
var ScrollPosition = $('window').scrollLeft();
```
**設定**
```javascript
//基本形
$(selector).scrollLeft(数値);

//例
$('window').scrollLeft(200);
```
- <font color="DarkTurquoise">`selector`</font>：水平スクロールの位置を取得または設定したい要素を指定する．
- <font color="DarkTurquoise">`数値`</font>：水平スクロールさせるピクセル数を指定する．

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