Как вставить атрибут изображения Dynami c в приложение в jquery?

Question

У меня есть div с идентификатором test. При попытке добавить тег img в div я просто получаю [object HTMLImageElement]. Есть ли способ получить мое изображение внутри #test div, используя append.

image_tag = document.createElement("img");
image_tag.setAttribute("alt", test_alt);
image_tag.setAttribute("class", test_class);
image_tag.setAttribute("src", test_src);


$("#test").append("<div class='test-class'>\
  <a class='t1' href=" + href_path + "?locale=test" + " target='_blank'>\
    <div class='head-test'>\
    image_tag //Display image here
  </div></div\);

Answer 1

Предполагается, что ваш image_tag исходит из другого источника. Если это не так, то вы можете просто добавить тег img в свой html и предоставить атрибут так же, как вы сделали для тега anchor

var image_tag = document.createElement("img");
image_tag.setAttribute("alt", "Some Alt");
image_tag.setAttribute("class", "SomeClass");
image_tag.setAttribute("src", "SomeSource");

var href_path = "Some Path";

var html = "<div class='test-class'>  <a class='t1' href='" + href_path + "?locale=test' target='_blank'>    <div class='head-test'> "+ image_tag.outerHTML +" </div></div>";

$("#test").append(html);
console.log(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Поскольку вам известна разметка HTML изображения, вы можете просто объединить ее в строку, переданную .append:

$("#test").append(`
<div class='test-class'>
  <a class='t1' href=" + href_path + "?locale=test" + " target='_blank'>
    <div class='head-test'>
      <img alt="${test_alt}" class="${test_class} src=${test_src}
    </div>
  </a>
</div>`);

Вы также можете превратить вставленную разметку в jQuery коллекцию заранее, используйте appendTo, чтобы вставить ее в нужное место, затем .find вложенный head-test и добавьте изображение к этому:

$(`<div class='test-class'>
  <a class='t1' href=${href_path}?locale=test target='_blank'>
    <div class='head-test'>
    </div>
  </a>
</div>`)
  .appendTo("#test")
  .find('.head-test')
  .append(image_tag);

(этот второй метод безопаснее, потому что это