Добавление изображений в HTML-документ с помощью JavaScript - PullRequest
Новая
       44

Добавление изображений в HTML-документ с помощью JavaScript

19 голосов
/ 29 апреля 2010

Я пробовал 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, но безрезультатно.

Заранее спасибо.

Ответы [ 6 ]

40 голосов
/ 29 апреля 2010

Вам нужно использовать document.getElementById() в строке 3.

Если вы попробуете это прямо сейчас в консоли 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);

... вы получите это:

Добавление изображений в HTML с помощью JavaScript http://img94.imageshack.us/img94/3769/googso2.png

4 голосов
/ 26 марта 2014

Проведя небольшое исследование, я обнаружил, что javascript не знает, что объект Document существует, если объект уже не загружен до кода скрипта (поскольку 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 голосов
/ 29 апреля 2010

Это работает: 

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');
3 голосов
/ 29 мая 2014

или вы можете просто 

<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>
1 голос
/ 29 апреля 2010

Избавьтесь от this операторов тоже 

var img = document.createElement("img");
img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png";
src = document.getElementById("gamediv");
src.appendChild(this.img)
0 голосов
/ 29 апреля 2010

Что следует обдумать:

  1. Использование jquery
  2. Какой this ваш код ссылается на
  3. Разве getElementById обычно document.getElementById?
  4. Если изображение не найдено, Вы уверены, что ваш браузер сообщит вам ?
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...