第13章　jQuery - 要素を追加する

# jQuery - 要素を追加する

***

jQueryを使用すると、新しい要素/コンテンツを簡単に追加できます。

新しいHTMLコンテンツを追加するために使用される4つのjQueryメソッドを見ていきます。

* `append()` - 選択した要素内の末尾に要素を挿入します
* `prepend()` - 選択した要素内の先頭に要素を挿入します
* `after()` - 選択した要素外の後に任意のHTML要素を挿入します
* `before()` - 選択した要素外の前に任意のHTML要素を挿入します

## append()メソッド

jQuery `append()`メソッドは、選択したHTML要素の最後にコンテンツを挿入します。

#### 例
[sample13-1.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

$("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
  <p>This is another paragraph.</p>

<button id="btn1">Append text</button>
  <button id="btn2">Append list items</button>

</body>
</html>
```

#### 実行結果

<!DOCTYPE html>
<pre><span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;></script>
<script> 
$(document).ready(function(){
  $(&quot;#btn1&quot;).click(function(){
    $(&quot;p&quot;).append(&quot; <b>Appended text</b>.&quot;);
  });
  $(&quot;#btn2&quot;).click(function(){
    $(&quot;ol&quot;).append(&quot;<li>Appended item</li>&quot;);
  });
});
</script>

<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button id=&quot;btn1&quot; style=&quot;font-size:inherit&quot;>Append text</button>
<button id=&quot;btn2&quot; style=&quot;font-size:inherit;margin-left:10px&quot;>Append list items</button>

</body>
</html>'" width="800" height="250"></iframe>

</span>
</pre>

***

> **練習**
>> **問題**[Ex13-1.html]

メソッドprepend()、after()を練習しましょう。

<!DOCTYPE html>
<pre><span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;></script>
<script> 
$(document).ready(function(){
  $(&quot;#btn1&quot;).click(function(){
    $(&quot;p&quot;).after(&quot; <b>Appended text</b>.&quot;);
  });
  $(&quot;#btn2&quot;).click(function(){
    $(&quot;ol&quot;).prepend(&quot;<li>Appended item</li>&quot;);
  });
});
</script>
<body>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>

<button id=&quot;btn1&quot;>after text</button>
  <button id=&quot;btn2&quot;>prepend list items</button>

</body>
</html>'" width="800" height="300"></iframe>

</span>
</pre>

content

第13章 jQuery - 要素を追加する

第13章　jQuery - 要素を追加する