@ PHP

prepend() append() abefor() after():HTMLの挿入

html() を使うと、もともと存在していた要素の内容がすべて上書きされてしまいます。要素の内容をのこしたまま HTML を追加したい場合は、要素を追加する prepend()、append()、abefor()、after() を使います。

HTML 要素内の先頭に挿入

指定した要素内部の先頭に HTML を挿入するには、prepend() を使います。

prepend() は、html() と同様に追加したい HTML を引数に指定します。

prepend.html では、p 要素の先頭に strong 要素を挿入しています。

prepend.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p id="first">テキストテキスト</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("p#first").prepend("<strong>先頭に挿入</strong>")
});
</script>
</body>

</html>

demo

HTML 要素内の最後に挿入

指定した要素内部の最後に HTML を挿入するには、append() を使います。prepend() と同じく、追加したい HTML を引数に指定します。

append.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p id="first"><テキストテキスト</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
  $("p#first").append("<strong>最後に挿入<strong>")
});
</script>
</body>

</html>

demo

HTML要素の前に挿入

指定した要素の前に HTML を挿入するには、before() を使います。

before.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p id="first">テキストテキスト</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("p#first").before("<h1>前に挿入</h1>")
});
</script>
</body>

</html>

demo

HTMLの後ろに挿入

指定した要素の後ろに HTML を挿入するには、after() を使います。

after.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p id="first">テキストテキスト</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("p#first").after("<h1>後ろに挿入</h1>")
});
</script>
</body>

</html>

demo