要素(エレメント)を動的に作成するのは、DOM では document.createElement です。もちろんそれでも使えますが、jQuery では至極簡単に $("要素の記述") で作成されます。作成されただけでは画面に所属しないので( 表示されない )、.appendTo( 既に存在する要素 ) として親要素の１番目の要素として登録します。
その後は、必要な属性・値・CSS・イベント・前後の補正を追加して完成させます。
// ************************************
// a 要素を作成して、
// anchorContent の子要素として追加する
// ************************************
$("<a></a>").appendTo( $("#anchorContent") )
// ************************************
// 属性として id と href と target の値をセット
// ************************************
.attr({
"id": "anchorContent1",
"href": "https://www.google.co.jp/",
"target": "_blank"
})
// ************************************
// テキストノードとしての値をセット
// ************************************
.text("Google")
// ************************************
// 表示関連の属性をセット
// ************************************
.css({
"font-size": "20px",
"font-weight": "bold",
"text-decoration": "none",
"color": "navy"
})
// ************************************
// イベントをセット
// ************************************
.click(function(){
console.log("アンカーがクリックされました");
});
二つ目以降は、最初のアンカーに対して、.insertAfter する事によって繋いで行きます。ここでは、親要素が PRE なので、二つ目以降は改行する為に最後に .before("\n\n") を追加しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
// 通常リンク
$("<a></a>").appendTo( $("#anchorContent") )
.attr({
"id": "anchorContent1",
"href": "https://www.google.co.jp/",
"target": "_blank"
})
.text("Google")
.css({
"font-size": "20px",
"font-weight": "bold",
"text-decoration": "none",
"color": "navy"
})
.click(function(){
console.log("アンカーがクリックされました");
});
// ボタンがわり
$("<a></a>").insertAfter($("#anchorContent1"))
.attr({
"id": "anchorContent2",
"href": "#"
})
.text("ボタンのかわり")
.css({
"font-size": "20px",
"font-weight": "bold"
})
.click(function( event ){
console.log("アンカーがクリックされました1");
window.open("https://translate.google.co.jp/?hl=ja&tab=iT");
// クリックする事によって起こる # の機能をキャンセル
event.preventDefault();
})
.before("\n\n");
// jQuery UI でアンカーをボタン化
$("<a></a>").insertAfter($("#anchorContent2"))
.attr({
"id": "anchorContent3"
})
.button()
.text("jQuery UI でアンカーをボタン化")
.css({
"font-size": "20px",
"font-weight": "bold",
"padding": "10px"
})
.click(function( event ){
console.log("アンカーがクリックされました2");
window.open("https://www.google.co.jp/maps/preview?hl=ja");
// クリックする事によって起こるかもしれない処理をキャンセル
event.preventDefault();
})
.before("\n\n");
});
</script>
<pre id="anchorContent"></pre>
タグ：jquery
|
|
【メソッド:jQueryの最新記事】
- jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する
- jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル
- jQuery の .contents と .children の違い
- jQuery の .children で、直近の子要素のみを選択して処理する
- jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う
- jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます
- JavaScript と jQuery : 位置関係から id の無い要素の参照を取得
- JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する
- jQuery の .val() と .val('値') と一括変更用の .val(関数)
- $.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
- jQuery : animation メソッド
