どうもこんばんは！HYPのこうじです。
javascriptに慣れてきたら、動的に要素を作成して要素に追加とかやってみたくなります。
そう。僕の事です。

例えば以下のような場合。
ショッピングサイト等でよくあるランキングを作ったとしましょう。
コーディングはこんな感じです。

<div id="ranking">
    <ul>
        <li>
            <a href="#">
                <p class="rank rank_1">1位</p>
                <img class="image" src="example1.jpg">
                <p class="name">グレートな商品</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p class="rank rank_2">2位</p>
                <img class="image" src="example2.jpg">
                <p class="name">エクセレントな商品</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p class="rank rank_3">3位</p>
                <img class="image" src="example3.jpg">
                <p class="name">ナイスアシストな商品</p>
            </a>
        </li>
    </ul>
</div>

これを更新する場合、例えばランキングのナンバリングとか自動で更新されてくれたらラクですよね？

そうなってくれれば、例えば3位が今週は1位になったとしてもナンバリング部分の変更は必要ありません。
変更が無いという事は、ナンバリングの修正漏れも回避出来るので人的ミスも抑える事が出来ます。
そう。javascriptならね。

ただ、動的にこういった便利にするには要素を動的に作れないと始まらないのでそんな要素を作る際に便利なプロパティ類をまとめました！
わーわー！どんどん。ぱふぱふ。

この記事の内容

要素作成時に使いそうなモノ

要素を作成

兎にも角にもこれが無いと始まりませんね。
ちなみに作成方法には色々あります。
以降の解説にはこちらで作成した『e』要素を使って説明しています。

Vanilla JS

// 普通に作成。
var e = document.createElement('div');

// テキストからDOM要素を作成。
var e = document.createElement('div');
e.innerHTML = '<p class="name">商品名</p><p class="price">&amp;yen; 1,980</p>';

jQuery

// 普通に作成。
var $e = $('<div />');

// テキストから要素を作成(普通に作成と一緒)。
var $e = $('<div><p class="name">商品名</p><p class="price">&amp;yen; 1,980</p></div>');

テキストの取得

要素内のテキスト情報を取得します。

Vanilla JS

// e要素の全容。
// <div>
// <p class="name">商品名</p>
// <p class="price">&amp;yen; 1,980</p>
// </div>

// タグが含まれる場合は全てタグを削除した状態の全てのテキストを取得します。
// エスケープ文字もそのまま取得します。
var txt = e.textContent;
// -- 取得文字列: 商品名&amp;yen; 1,980

// タグを含んだ全てのテキストを取得します。
var html = e.innerHTML;
// -- 取得文字列: <p class="name">商品名</p><p class="price">&amp;yen; 1,980</p>

jQuery

出力結果は一緒ですので、省略します。

テキストの設定

要素内のテキストを変更します。取得すると大した変わらないです。

Vanilla JS

// テキストを設定。
e.textContent = 'テキスト内容を入力';
e.innerHTML = 'テキスト内容を入力';

jQuery

// テキストを設定。
$e.text('テキスト内容を入力');
$e.html('テキスト内容を入力');

属性を追加と削除

属性の追加は非常に万能で、下記で紹介するクラスやIDの追加も全てこのやり方で代用出来ます。

Vanilla JS

// 属性を指定。
e.setAttribute('id', 'element-id');

// 属性を削除。
e.removeAttribute('id');

// 属性を取得。
var attr = e.getAttribute('id'); // 値が無い場合はundefined。

jQuery

// 属性を指定。
$e.attr('id', 'element-id');

// 属性を削除。
$e.attr('id', '');

// 属性を取得。
var attr = $e.attr('id'); // 値が無い場合はundefined。

IDを追加

Vanilla JS

// IDを設定。
e.id = 'element-id';

jQuery

// IDを設定。
$e.attr('id', 'element-id');

クラスを追加

Vanilla JS

// クラス名を上書き。
e.className = 'class_name';

// クラス名を追加。
e.classList.add('class_add');

// クラス名を削除。
e.classList.remove('class_remove');

// クラス名を切り替え。
// 指定クラスがある場合は削除し、無い場合は追加します。
e.classList.toggle('class_toggle');

jQuery

// クラス名を上書き。
$e.attr('class', 'class_name');

// クラス名を追加。
$e.addClass('class_add');

// クラス名を削除。
$e.removeClass('class_remove');

// クラス名を切り替え。
// 指定クラスがある場合は削除し、無い場合は追加します。
$e.toggleClass('class_toggle');

要素の追加と削除

Vanilla JS

Vanilla JSにはjQueryの様に便利な『after』と『before』メソッドが存在しません。
なので、inserBeforeメソッドを利用して疑似的に実装します。

// 親要素を作成。
var parent = document.createElement('div');

// 要素を後ろに追加。
parent.appendChild(e);

// 指定要素の直後に追加。
// 親要素の更に親要素の子要素の中にある親要素の次の要素の手前に追加。
// わかりずらい？^^
parent.parentNode.insertBefore(e, parent.nextSibling);

// 指定要素を直前に追加。
parent.parentNode.insertBefore(e, parent);

// 要素を削除。
parent.removeChild(e);

// 要素内を全て削除。
$parent.innerHTML = null;

jQuery

// 親要素を作成。
var $parent = $('<div />');

// 要素を後ろに追加。
$parent.append($e);

// 指定要素の直後に追加。
$parent.after($e);

// 指定要素を直前に追加。
$parent.before($e);

// 要素を削除。
$parent.remove($e);

// 要素内を全て削除。
$parent.html('');

スタイルシートの指定

Vanilla JS

指定時はハイフン直後の文字を大文字にします。
例えば『background-color』の場合の指定プロパティは『backgroundColor』となります。

e.style.backgroundColor = '#000';
e.style.position = 'absolute';

jQuery

$e.css('background-color', '#000');
$e.css('position', 'absolute');

// jQueryは連結出来ます。便利！
$e.css('background-color', '#000').css('position', 'absolute').css('left', '20px');

要素をコピー

要素は一つしか存在しないので、例えば『A要素に追加した要素をB要素にも追加したい』以下のようにした場合A要素の追加した要素は無かった事になります。

// 追加する要素
var e = document.createElement('div');

// A要素に追加する。
A.appendChild(e);

// B要素にも同じ内容を追加する。
// 追加した時点でe要素はAからBに移動する事になる。
B.appendChild(e);

同じものを複数コピーしたい場合には『cloneNode』を使用します。
実は最近知りました(笑)

Vanilla JS

引数は子要素も一緒にコピーするかしないかです。
true = 子要素も一緒にコピーする。
false = 子要素は無視。

var clone = e.cloneNode(true);

jQuery

引数をtrueにするとイベント類もまとめてコピーします。

var $clone = $e.clone(true);

おわり

よく使いそうな要素操作をまとめてみました！
多分、これだけでも色々出来るはず。是非試してみて下さい！

これにプラス、イベントの追加等まで加えればjavascriptでいろんなことが出来ます。
楽天とかはせいぜい出来てjavascriptなので、有効に活用したいですね！