読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(DOM)要素を追加するサンプル

DOMを使って要素を追加するサンプルです。子要素を追加する関数として作成してみました。ちなみに、innerHTMLを使えば簡単なのですが、DOMの仕様に沿った場合は以下のようになるらしいので、メモとして残しておきます。

// 指定のタグの子要素として任意のタグを追加する
//  tagName = 追加するタグの種類を指定
//  cssClassName = CSSのクラス名を指定(null可)
//  text = マークアップするテキスト
//  attributeObject = 属性値をキーバリューで指定(null可)
//  parentNode = 親要素の指定(nullの場合はbody要素の最後に追加)
function insertChildNode(
    /*string*/tagName, 
    /*string*/cssClassName, 
    /*string*/text, 
    /*object*/attributeObject, 
    /*HTMLElement*/parentNode)
{
    // 新しいタグを作成
    var tag = document.createElement(tagName);
    
    // CSSクラスが設定されていればセットする
    if(cssClassName)
    {
        tag.className = cssClassName;
    }
    
    // テキストの追加
    tag.appendChild(document.createTextNode(text));
    
    // 属性の追加
    if(attributeObject)
    {
        for(var i in attributeObject)
        {
            tag.setAttribute(i, attributeObject[i]);
        }
    }
    
    // ドキュメントに追加
    if(parentNode)
    {
        parentNode.appendChild(tag);
    }
    else
    {
        document.body.appendChild(tag);
    }
}

// testというidのタグの子にリンク要素を追加する
insertChildNode(
    'a', 
    'test', 
    '追加リンク',
    {'href':'test.html', 'target':'_blank'}, 
    document.getElementById('test'));
    
// 出力されるタグ
<a class="test" href="test.html" target="_blank">;追加リンク</a>