【Javascript + jQuery】「jQuery」で「HTML」タグを追加する方法

$(" html", attributes )
$("加えたいHTMLタグ名", "タグ内のテキストなど")

jQuery(function($){
$("<タグ名>テキスト</タグ名>").appendTo("#ID名");
});


まず、
$(" html", attributes )
の書式で、加える「HTML」タグのオブジェクトを生成します。
その後、「.appendTo("#ID名")」を使って、
追加する場所を特定して追加する。


$("<a></a>")
$("<img>")
$("<img/>")

というように、
タグだけを指定して追加することも可能。


属性も指定したい時は、
第2引数を利用する。
第2引数に「属性名:"値", 属性名:"値", ・・・・・」と記述することで設定可能。
「Javascript」の予約語に「class」があるため、「"class"」と「"」で取り囲む必要がある。
第2引数に属性を指定するときは、第1引数に属性を記述してはいけない。
第2引数を指定するときは、属性はすべて第2引数に指定する。

jQuery(function($){
$("<ahref='bar.html'></a>",{target:"_blank"});
$("<a></a>",{href:"abc.html",target:"_blank","class":"myClass"});
});



jQuery(function($){
$("<div></div>",{
width:100,
height:100,
css:{border:"5pxsolidgray"},
addClass:"mydiv",
on:{ click:function(event){//イベント設定}}
});
});

jQuery(function($){
//処理をここに書く
});


$(function($){
//処理をここに書く
});


//(廃止予定らしい)
$(document).ready(function($){
//処理をここに書く
});

jQuery("セレクタ");
$("セレクタ");

$("p a") //「p」要素の中にある「a」要素（リンク）を全て選択。
$("#name") //id属性がnameの要素を選択。
$("#addr1,#addr2") //id属性が「addr1」「addr2」要素を選択。（カンマ区切りで複数選択）
$("a[href$='pdf']") //リンク先がpdfで終わる「a」要素を全て選択。


jQuery("セレクタ").メソッド("パラメータ[引数]");
$("セレクタ").メソッド("パラメータ[引数]");

jQuery('h1').css('color','red');
$('h1').css('color','red');
jQuery('#ID名').css('color','red');
$('#ID名').css('color','red');
jQuery('.クラス名').css('color','red');
$('.クラス名').css('color','red');

$("#color_div").css("border","1px solid green");

$("#color_div").css("border","1px solid red");
var color_div=$("#color_div");
color_div.css("border","1px solid red");