今回は jQuery で用意されている append , appendTo , before , after 関数を使って要素の追加を行う方法について説明します。
■各関数の定義について
| 関数名 | 書式 | 引数 | 戻り値 |
|---|---|---|---|
| append | $.(セレクタ).append(content) | セレクタ：追加対象要素を指し示す文字列 content：追加する文字列、DOM Elementおよび jQueryオブジェクト |
jQueryオブジェクト |
| appendTo | $.(セレクタ).appendTo(content) | セレクタ：追加する要素を指し示す文字列または、 追加文字列 content：追加対象要素を指し示す文字列 (セレクタ) |
jQueryオブジェクト |
| before | $.(セレクタ).before(content) | セレクタ：追加対象要素を指し示す文字列 (実際はこのセレクタの外側の前方に追加) content：追加する文字列、DOM Elementおよび jQueryオブジェクト |
jQueryオブジェクト |
| after | $.(セレクタ).after(content) | セレクタ：追加対象要素を指し示す文字列 (実際はこのセレクタの外側の後方に追加) content：追加する文字列、DOM Elementおよび jQueryオブジェクト |
jQueryオブジェクト |
ここで注意するのは appendTo 関数で append とは逆の指定となり、 appendTo の引数（content）で指定されたセレクタの子要素の最後に $.(セレクタ) の「セレクタ」部分が追加されます。
また before , after 関数は指定されたセレクタの外側の前後へ、指定文字列等（content）が追加されます。
では実際の例を以下に示します。
■要素を追加する方法（append,appendTo,before,after）
<html>
<head>
<meta charset="utf-8">
<title>jquery append</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var i = 1;
// append による指定要素の最後にHTML文字列の追加
function doAppend() {
$("#maindiv").append("<p>追加の要素(" + i + "):append</p>\n");
i++; // これを無くして上の「i」⇒「(i++)」でもOK
return false;
}
// appendTo によりHTML文字列を指定要素の最後に追加
function doAppendTo() {
$("<p>追加の要素(" + (i++) + "):appendTo</p>\n").appendTo("#maindiv");
return false;
}
// before による要素の追加
function doBefore() {
$("#maindiv").before("<div>追加の要素(" + (i++) + "):before</div>\n");
return false;
}
// after による要素の追加
function doAfter() {
$("#maindiv").after("\n<div>追加の要素(" + (i++) + "):after</div>");
return false;
}
</script>
</head>
<body>
<h1>jquery append</h1>
<div id="maindiv">
</div>
<button onclick="doAppend();">append</button>
<button onclick="doAppendTo();">appendTo</button>
<button onclick="doBefore();">before</button>
<button onclick="doAfter();">after</button>
</body>
</html>
上記のソースを実行し、「append」ボタンを2回押下後、「appendTo」「before」「after」ボタンを順に押下すると、HTML内のソースは以下の様になります。
<h1>jquery append</h1> <div>追加の要素(4):before</div> <div id="maindiv"> <p>追加の要素(1):append</p> <p>追加の要素(2):append</p> <p>追加の要素(3):appendTo</p></div> <div>追加の要素(5):after</div>
上記では appendTo 関数は追加処理と説明しましたが、実は移動処理が本当の処理なのです。
「$.(セレクタ).appendTo」のセレクタの中がHTMLのDOMのなかで、存在しないものであれば、その文字列そのものを追加処理し、 存在するセレクタであればそれ自身を移動します。
それでは、以下のソースを見て下さい。
■appendToについて
<html>
<head>
<meta charset="utf-8">
<title>jquery append2</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
// appendTo によりHTML文字列を指定要素の最後に追加
function doAppendTo1() {
$("<p>追加の要素:appendTo</p>\n").appendTo("#maindiv");
return false;
}
// appendTo によりセレクタで指定されたHTML文字列を指定要素の最後に移動
function doAppendTo2() {
$("#padd").appendTo("#maindiv");
return false;
}
</script>
</head>
<body>
<h1>jquery append2</h1>
<p id="padd">「id=padd」の行</p>
<div id="maindiv">
<p>「id=maindiv」の中の最初の行</p>
</div>
<button onclick="doAppendTo1();">appendTo1</button>
<button onclick="doAppendTo2();">appendTo2</button>
</body>
</html>
「appendTo1」ボタンを押下すると常に「<p>追加の要素:appendTo</p>」が追加され、 「appendTo2」ボタンを押下すると「id="padd"」の行が追いかける様に最後の行に移動するのが分かると思います。
appendTo 関数は子要素の最後に移動しますが、先頭に追加するには prependTo 関数があります。 また append 関数に対しては prepend 関数があります。
PR
コメント