エクセレンス★ブログ

01日 2月 2019

JQueryでHTMLタグ生成あれこれ

JQueryで動的にHTMLタグを生成する時に使うメソッドのメモです。

DOM形式でタグを生成

タグを動的に生成することはとても簡単です。

オブジェクト.append(タグ);

最初のコンテンツ

<!DOCTYPE html>

<html lang='ja'>

<body>

</body>

</html>

jQuery

$(document).ready(function() {

$("body").append($("<input>").attr("type","text"));

});

実行結果

このようにタグが動的に作成できます。

要素に対して追加する場所を指定する

メソッド	機能
要素A.append(要素B)	要素Aの最後に要素Bを追加する
要素A.prepend(要素B)	要素Aの最初に要素Bを追加する
要素A.after(要素B)	要素Aの次に要素Bを追加する
要素A.before(要素B)	要素Aの前に要素Bを追加する
要素B.appendTo(要素A)	要素Aの最後に要素Bを追加する
要素B.prependTo(要素A)	要素Aの最初に要素Bを追加する
要素B.insertAfter(要素A)	要素Aの次に要素Bを追加する
要素B.insertBefore(要素A)	要素Aの前に要素Bを追加する

最初のコンテンツ

<!DOCTYPE html>

<html lang='ja'>

<body>

<p id="a">A</p>

</body>

</html>

jQuery

$(document).ready(function() {

$("#a").append($("<p>").text("B")); $("#a").prepend($("<p>").text("C")); $("#a").after($("<p>").text("D")); $("#a").before($("<p>").text("E"));

});

実行結果

カテゴリ： yoshizawa, jQuery, 2019/02