第5回 コア編：連載：jQuery逆引きリファレンス（3/13 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　$()関数を利用することで、生のHTML文字列からjQueryオブジェクトを生成することもできます。

　例えば以下は、$()関数で新規に生成した<img>タグをページに追加する例です。

<script type="text/javascript">

$(function() {

  // <img>要素を追加 （1）
  $('<img />').
    attr('src', 'http://www.wings.msn.to/books/978-4-7980-2401-1/978-4-7980-2401-1_logo.jpg').
    attr('alt', 'ASP.NET MVC実践プログラミング').
    appendTo('body');

  // <img>要素を追加 （2）
  $('<img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="10日でおぼえるASP.NET 3.5入門教室" />').
    appendTo('body');
});

</script>

リスト080 新規に生成した<img>タグをページに追加（JqueryHtml.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト080の実行結果

　$()関数では、（1）のように最初に空の要素を作成しておき、それから属性やコンテンツを追加していくこともできますし、（2）のように最初から属性やコンテンツを含んだ要素を作成することもできます。

　いずれの場合にも、指定するHTML文字列はWell-Formed（整形式。開始タグと終了タグが対になっているなど、XML文書のように文法に従っている）である必要があります。さもないと、ブラウザによっては正しく動作しない可能性もありますので、注意してください。