How can I add an “img” tag to a “p” element in basic Javascript?

Question

So, I'm trying to add an "img" tag inside a "p" element. However, I can't seem to find how to set the "img" tag attribute.

I have to create this:

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

I've tried: Creating an img element with distinct attributes and appending it to the "p" element:

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

Appending the img directly to the original node (this is ugly):

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

Here is my entire section, with comments:

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)

The final output should be the line given at the start of the post. Thank you in advance for your help, I hope this is clear.

Answer 1

img elements are not attributes, which is why using setAttribute doesn't work.

Your code here is a correct way to do it:

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

That said, those attributes are reflected as properties, so:

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)

In both cases, you'd do the same thing with the label element you want before the img .

Alternately, you can use insertAdjacentHTML :

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

Or since you just created divp and it doesn't have anything else in it, you could assign to innerHTML .

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

(In all of the above, you still need your document.getElementById("recherches-stockees").appendChild(divp) line.)