JavaScriptで要素の構造を生成する方法を教えてください

2023/08/16 11:24

このQ&Aのポイント

JavaScriptを使用して、要素の構造を生成する方法について教えてください。
具体的には、JavaScriptでdiv要素を生成し、その中にimgタグで画像を表示したいと考えています。
しかし、生成した後にinnerHTMLにimgタグの情報を入れようとしてもうまくいかないため、困っています。どうすればよいでしょうか？

ベストアンサー

javascriptで要素の構造を生成

2012/07/15 00:42

昨日質問したプログラムの続きなんですが、実はクリックした画像を大きくしたくてその方法を考えています 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してみたんですが、これもダメでしたどうすればよいのか見当つかず困っています生成した後のものを扱うのが難しそうなので一度にすべて生成するようにするのかなと思いつつやり方がわかりませんよろしくお願いします

html58
お礼率88% (8/9)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2012/07/16 12:24 回答No.2

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

質問者

お礼 2012/07/18 11:22

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

その他の回答 (1)

devman
ベストアンサー率42% (20/47)

2012/07/15 01:21 回答No.1

ライブラリを利用してみてはいかがでしょうか？ # デモをクリックすることで動作の確認ができるようです。画像をスムーズに拡大できるjQuery版FancyZoom:phpspot開発日誌 http://phpspot.org/blog/archives/2008/09/jqueryfancyzoom.html 他にも… jquery 画像クリック拡大 - Google 検索 http://www.google.co.jp/webhp?sourceid=chrome-instant&ie=UTF-8#hl=ja&safe=off&sa=X&ei=QJwBUPC9F-XQmAXW6NjqCQ&ved=0CD0QvwUoAQ&q=jquery+%E7%94%BB%E5%83%8F+%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF+%E6%8B%A1%E5%A4%A7&spell=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=d530e58be1a8f8c4&biw=1920&bih=965

質問者

お礼 2012/07/15 10:25

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

質問者

補足 2012/07/15 11:06

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

関連するQ&A

スタイルシートのレイヤーに乗せた画像を動的に表示する方法
<div id="test" style="position=absolute; top=400px; left=200px; z-index=10;"><img src="gazou.gif"></div> 上記を動的に表示するために以下の方法を考えました var element = document.createElement('div'); element.id = "test"; element.style = "position=absolute; top=400px; left=200px; z-index=10;"; element.innerHTML = '<img src="gazou.gif">'; var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(element); しかしこれだと、element.style = "position=absolute; top=400px; left=200px; z-index=10;"; の部分がまずいらしく動作しません。どのようにすればよいでしょうか。よろしくお願いします。
- 締切済み
- JavaScript
css javascriptについて教えて下さい。
下記のように、ボタンを押すとdivタグの中にpタグを表示するようにしました。そこで、そのpタグがdivタグの中央から表示するようにしたいのですが、できません。cssでpタグの左右のmarginをautoにするのかくらいしか思いつかず困っています。pタグがdivタグの中央から表示されるようにするにはどうしたらよいでしょうか。教えて下さい。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> #w{ width:500px; height:50px; border : solid 1px; overflow: hidden; } p{ display:inline-block; width:50px; height:50px; margin-left:auto; margin-right:auto; } </style> <script type="text/javascript" language="javascript"> var count = 0; var box; window.onload = function() { box = document.getElementById("w"); } function btnClick(){ var pNode = document.createElement("p"); pNode.innerHTML = count; 　 box.appendChild(pNode); count ++; } </script> </head> <body> <div id="w"></div> <button onClick="btnClick()">Ｐタグを生成</button> </body> </html>
- ベストアンサー
- HTML
javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; 　　　　} var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = 50; 　　　　} var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = 200; } </script> </body> </html>
- ベストアンサー
- JavaScript
要素を追加する関数の作成
<div id="here"></div> 上の様な要素内に要素と内容を追加する関数を作りたいのですが、思った結果が得られずに悩んでいます。 function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = <p>content</p>; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); この様な場合にはどうしたら良いのか、何かアドバイスを頂けると嬉しいです。
- ベストアンサー
- JavaScript
appendChildとinnerHTMLを短く
テーブルのthタグと内容を追加したい・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです・どうすれば良いでしょうか？ var tr = document.createElement("tr"); tbody.appendChild(tr); var th = document.createElement("th"); th.innerHTML = '見出1'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出2'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出3'; tr.appendChild(th); var th = document.createElement("th"); ……
- ベストアンサー
- JavaScript
スクロール付きのdivタグを作成するには
縦スクロール付きのdivタグを作成するにはどうすればよろしいでしょうか。下記のコードでやってみたのですが、うまくいきません。何が悪いのでしょうか。 var tarobj = object; var ele = document.createElement("div"); ele.setAttribute("overflow-y","scroll;"); ele.setAttribute("width", "100px"); ele.setAttribute("height", "25px"); ele.innerHTML = strobj; tarobj.appendChild(ele);
- 締切済み
- JavaScript
新しく開いたウィンドウへの要素の挿入方法
javaScriptのwindow.openを使ってウィンドウを開きそのウィンドウにhtmlタグを挿入するプログラムを作りたいのですがうまくいきません。例えば以下のような場合だと id="parent"を持つ親タグの子要素として、appendChildメソッドを使用しimgタグを挿入出来ます　　　var img = document.createElement("img"); 　　　var parent = document.getElementById("parent"); 　　　parent.appendChild(img); しかしwindow.openで開いたウィンドウは親となるタグがありません。まっさらなウィンドウに要素を挿入するにはどうすればいいんでしょうか？なかなかうまくいかず困っております。ぜひお詳しい方ご回答お願いします。
- ベストアンサー
- JavaScript
javascriptで困っています
javascriptで、スマホでタッチしたところに四角を描いて、それをtouchmoveイベントで取得した位置に動かし、ドラッグして、はなしたところでその四角を消すというのを作ろうとしています。思っているように上手く動かないのですが、どのように修正すればいいのでしょうか？少し動いた所で止まってしまい、touchmoveイベントの位置の値を取得できてないように思います。四角なしで試すとtouchmoveイベントの位置の値を取得できます教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <title>test</title> <style type="text/css"> #panel_board{ width:320px; height:384px; position:relative; } #move_panel{ width:64px; height:64px; position:absolute; background-color:#0F9; z-index:10; } </style> <script type="text/javascript" charset="utf-8">  </script> </head> <body onLoad="init();"> <div id="panel_board"> </div> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </body> </html>
- ベストアンサー
- JavaScript
【javascript　文法】値渡し？参照渡し？
以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって参照渡し？それとも値渡し？　と混乱しています。この辺のところを、教えてください。お願いいたします。
- ベストアンサー
- JavaScript

JavaScriptで要素の構造を生成する方法を教えてください

javascriptで要素の構造を生成