【jQuery】DOM要素の作成・操作・挿入

アンカー作成

まずはアンカーを作成して挿入してみます。

<div id="contents1"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
    // アンカーを作成して挿入
    $("<p><a>MDN</a></p>").appendTo("#contents1");
</script>

レンダリング

アンカーにhref属性設定

次にアンカーにhref属性を設定してみます。

<div id="contents2"></div>
<script type="text/javascript">
    $("<p><a>MDN</a></p>")
        // pタグの子要素であるaタグを選択し、href属性を設定
        .find("a")
            .attr("href", "https://developer.mozilla.org/ja/docs/Web")
            // NOTE: フィルタリングを解除
            .end()
        .appendTo("#contents2");
</script>