web-dev-qa-db-ja.com

JavaScriptを使用してHTMLドキュメントに画像を追加する

いくつかのサイトからいくつかのHTML DOMコードを試しましたが、うまくいきません。何も追加していません。誰もこれに関する実用的な例を持っていますか？

this.img = document.createElement("img");
this.img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png";
src = getElementById("gamediv");
src.appendChild(this.img)

しかし、それはdivに何も追加していません。 （gamediv）document.bodyも試してみましたが、結果はありません。

前もって感謝します。

javascripthtmldomimage
19
Anonymous

3行目にdocument.getElementById()を使用する必要があります。

Firebugコンソールで今すぐ試してみると：

var img = document.createElement("img");
img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";

var src = document.getElementById("header");
src.appendChild(img);

...あなたはこれを得るでしょう：

JavaScript http://img94.imageshack.us/img94/3769/googso2.pngを使用してHTMLに画像を追加する

41
Daniel Vassallo

これは動作します：

var img = document.createElement('img');
img.src = 'img/eqp/' + this.apparel + '/' + this.facing + '_idle.png';
document.getElementById('gamediv').appendChild(img)

またはjQueryを使用：

$('<img/>')
.attr('src','img/eqp/' + this.apparel + '/' + this.facing + '_idle.png')
.appendTo('#gamediv');
4
Guffa

少し調べてみると、オブジェクトがスクリプトコードの前にロードされていない限り、javascriptはDocument Objectの存在を知らないことがわかりました（javascriptがページを読み下げるため）。

<head>
    <script type="text/javascript">
        function insert(){
            var src = document.getElementById("gamediv");
            var img = document.createElement("img");
            img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png";
            src.appendChild(img);
        }
     </script>
 </head>
 <body>
     <div id="gamediv">
         <script type="text/javascript">
             insert();
         </script>
     </div>
 </body>
4
user2886138

またはあなたはちょうどすることができます

<script> 
document.write('<img src="/*picture_location_(you can just copy the picture and paste   it into the the script)*\"')
document.getElementById('pic')
</script>
<div id="pic">
</div>
2
FullForceDonkeyPunch

thisステートメントも削除します

var img = document.createElement("img");
img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png";
src = document.getElementById("gamediv");
src.appendChild(this.img)
1
Peter Bridger