javascriptで要素の構造を生成

昨日質問したプログラムの続きなんですが、
実はクリックした画像を大きくしたくてその方法を考えています

function getElements ( obj ) {
//イメージタグここから
var src = obj.getAttribute('src');
var element = document.createElement('img');
element.src = src;

//div生成
var box = document.createElement('div');
box.style.position = 'fixed';
box.class = 'photobig';
box.style.top = '50%';
box.style.left = '50%';
box.style.width = '900px';
box.style.height = '600px';
box.style.background = '#000000';
box.style.opacity = '0.7';
box.style.marginTop = '-300px';
box.style.marginLeft = '-450px';

box.innerHTML = element;//←ここが問題

var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(box);
// body要素にdivエレメントを追加

// var objPhotobox = document.getElementsByClassName("photobig").item(0);
// objPhotobox.appendChild(element);


}

javascriptでdivを生成し、その中にimgタグで画像を入れようとしています
appendChildで生成した後で、innerHTMLにimgタグの情報を入れようとしています

innerHTMLに変数をいれてもタグとして生成されないのが分かったところで、
divにクラス名を付けてそのクラスにappendChildしてみたんですが、これもダメでした


どうすればよいのか見当つかず困っています
生成した後のものを扱うのが難しそうなので一度にすべて生成するようにするのかなと思いつつやり方がわかりません
よろしくお願いします

No.1 回答者： devman 回答日時： 2012/07/15 01:21

ライブラリを利用してみてはいかがでしょうか？

# デモをクリックすることで動作の確認ができるようです。

画像をスムーズに拡大できるjQuery版FancyZoom:phpspot開発日誌
http://phpspot.org/blog/archives/2008/09/jqueryf …

他にも…

jquery 画像 クリック 拡大 - Google 検索
http://www.google.co.jp/webhp?sourceid=chrome-in …

この回答への補足

ちなみにこちらが前の質問です
http://oshiete.goo.ne.jp/qa/7588254.html
IDを使わずにやりたいです

補足日時：2012/07/15 11:06

この回答へのお礼

お返事ありがとうございます
もっともなご意見なんですが、
ブログのカスタマイズで使うので外部ファイル読み込みは使う予定はないです
ライブラリーではなく自分で生成したいと思います
よろしくお願いします

お礼日時：2012/07/15 10:25

No.2 ベストアンサー 回答者： fujillin 回答日時： 2012/07/16 12:24

よくわかりませんが

body（親）の中にbox（子）を生成させているのと同じなのでから、
box（親）の中にelement（子）を生成するには
　　box.appendChild(element);
って、発想になりませんか。

この回答へのお礼

box.appendChild(element);
って発想になりましたｗ
ありがとうございます
意図していたものが作れました
http://html58.ti-da.net/e3992430.html
またよろしくお願いします

お礼日時：2012/07/18 11:22