diadia

興味があることをやってみる。独学で勉強しています。初心者から始めたので困ったことを書いて同じ境遇の方のヒントになればと思います。

jQueryのDOM操作

参考資料

http://www.koikikukan.com/archives/2013/07/16-003333.php
とてもわかりやすい。

DOM要素を新しく作る場合

新しく要素を作る場合以下のようにタグを書く。タグとして書かないとそれはセレクタとしての意味になるので注意する。

var p = ${"<p>"}; 
var p = ${"<p></p>"}; #又はこのように書いても良い。

新しく作ったDOM要素にコンテンツを入れる場合

html()メソッドを使う。

p.html("今日の出来事");

新たに作ったDOM要素を既存のDOMに追加する場合

メソッドは3種類ある。append(),prepend(),html()をつかう。使い方は追加したい要素をセレクタで指定し、メソッドを使う。

$("body").append(p) #bodyの子要素最下位末尾に追加できる。
$("body").prepend(p) #bodyの子要素先頭に追加する
$("body").html(p) #body要素を内容を新規作成としてpを加える。

 

DOM要素を新しく作り第二引数を取ることについて

新しく要素を作るとき同時に属性を定めることもできるようだ。
https://qiita.com/kazu56/items/8e92d08fd1bba0a2d771
その場合ブラケットで括る。以下のようなイメージ。

var a = $("<a>",{属性:値});
var a = $("<a>",
{ href:"asbua.jp/shu/page",
  "class" : "sample"});

そして第2引数は属性のみではなくjQueryのメソッドも扱える。例えばtext()メソッドを扱うことができる。

var p = $("<p>",{ text:"message"});