Как я могу добавить тег "img" к элементу "p" в базовом Javascript?

Question

Итак, я пытаюсь добавить тег "img" внутри элемента "p". Тем не менее, я не могу найти, как установить атрибут тега "img".

Я должен создать это:

<p class="titre-recherche"><label>chaîne de caractères saisie</label><img src="croix30.jpg" class="icone-croix"/>value</p>

Я пробовал: Создание элемента img с различными атрибутами и добавление его к элементу «p»:

imgp = document.createElement("IMG")
imgp.setAttribute("src", "croix30.jpg")
imgp.setAttribute("class", "icone-croix")
divp.appendChild(imgp)

Присоединение img непосредственно к исходному узлу (это ужасно):

document.getElementById("recherches-stockees").appendChild(divp).appendChild(imgp)

Вот весь мой раздел с комментариями:

var saisie = document.getElementById('zone_saisie').value
// Create "p"
var divp = document.createElement("P")
// set "p" attributes
divp.setAttribute("class", "titre-recherche")
divp.setAttribute("label", "chaîne de caractères saisie")
// divp.setAttribute("img", "src=\"croix30.jpg\" class=\"icone-croix\"")
divp.setAttribute("img", "")
divp.getAttribute("img").setAttribute("src", "croix30.jpg")
.setAttribute("class", "icone-croix")
// Set "p" text
var t = document.createTextNode(saisie)
divp.appendChild(t)
// Create "img"
// imgp = document.createElement("IMG")
// Set "img" attributes
// imgp.setAttribute("src", "croix30.jpg")
// imgp.setAttribute("class", "icone-croix")
// Link "p" and "img"
// divp.appendChild(imgp)
document.getElementById("recherches-stockees").appendChild(divp)
// document.getElementById("recherches-stockees").appendChild(imgp)

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

Answer 1

img элементы не являются атрибутами, поэтому использование setAttribute не работает.

Ваш код - правильный способ сделать это:

imgp = document.createElement("IMG")
imgp.setAttribute("src", "croix30.jpg")
imgp.setAttribute("class", "icone-croix")
divp.appendChild(imgp)

Тем не менее, эти атрибуты отражены как свойства, поэтому:

imgp = document.createElement("IMG")
imgp.src = "croix30.jpg"
imgp.className = "icone-croix" // Note it's className, not class when it's a property
divp.appendChild(imgp)

В обоих случаях вы должны сделать то же самое с элементом label, который хотите до img.

Также вы можете использовать insertAdjacentHTML:

divp.insertAdjacentHTML("<label>chaîne de caractères saisie</label><img src='croix30.jpg' class='icone-croix'>")

Или, поскольку вы только что создали divp и в нем больше ничего нет, вы можете присвоить innerHTML.

divp.innerHTML = "<label>chaîne de caractères saisie</label><img src='croix30.jpg' class='icone-croix'>"

(Во всем вышеперечисленном вам все еще нужна строка document.getElementById("recherches-stockees").appendChild(divp).)