Как динамически поместить изображение в тег привязки с помощью javascript

#javascript #asp.net

Вопрос:

Я динамически создал изображение в javascript. Я хочу, чтобы изображение было помещено внутри тега привязки, как я могу это сделать?

         var element = document.createElement("img");
        element = cell.appendChild(element);
        element.setAttribute("src", "/Images/Delete.gif");

Ответ №1:

 var anchor=document.createElement('a');
anchor.href='#';
var element = document.createElement("img");
element.setAttribute("src", "/Images/Delete.gif");
anchor.appendChild(element);
cell.appendChild(anchor);

я не тестировал код, я использовал свой мозг в качестве интерпретатора, поэтому в нем может быть ошибка. но я думаю, вы должны понять концепцию.

1. Для меня выглядит правильно и фактически отвечает на вопрос, правильно ли я его прочитал

2. Но почему так правильно с DOM? Почему бы просто не cell.innerHTML = '<a href="#"><img src="..."></a>'; который делает то же самое и доступен для чтения?

3. Поскольку стандарты — довольно крутой парень, они стандартизированы и ничего не боятся. Если я правильно помню, innerHTML был изобретен InternetExplorer. Это должно быть достаточной причиной, чтобы не использовать его.

Ответ №2:

Вам понадобится ссылка на тег привязки (node). Допустим, это a . Поскольку A и IMG являются очень простыми элементами html, это будет работать просто отлично:

 a.innerHTML  = '<img src="/Images/Delete.gif">';

Или, если вы хотите заменить содержимое A тега (вместо добавления img), просто удалите :

 a.innerHTML = '<img src="/Images/Delete.gif">';

Не может произойти сбой. В любом браузере. jQuery является излишеством для чего-то такого простого (и будет делать то же самое внизу).

Редактировать
Но, похоже, вы вставляете изображение img в cell , а не в тег привязки… Или ваш тег привязки вызывается cell ? В этом случае просто замените a. на cell. =)

Ответ №3:

element.setAttribute перед добавлением его, поскольку вы переопределяете элемент к тому, что, как я предполагаю, теперь является ячейкой … или не назначайте element = cell.append..

 var element = document.createElement("img");
element.setAttribute("src", "/Images/Delete.gif");
cell.appendChild(element);

Однако я предлагаю следующее:

 function insertImage(anchorID, imagesrc){
  var img = "<img src='"   imagesrc   "' alt='image' />";
  $("#" anchorID).html($("#" anchorID).html()   img);
}

Я добавляю html в html на случай, если там есть какой-либо текст, который вы все еще хотите сохранить .. в противном случае отмените это второе утверждение html

Для этого вам нужен плагин jQuery javascript для работы ..http://docs.jquery.com/Downloading_jQuery

Если вы предпочитаете не включать плагин, то:

 function insertImage(anchorID, imagesrc){
      var img = "<img src='"   imagesrc   "' alt='image' />";
      document.getElementById(anchorID).innerHtml = img;
    }