Simple js question. appendChild image

JavaScript
1

Hello all. just playing w/some very simple basic js to try & learn it
this works for the rest (h3 & p ), but why is it not appending the image?

"use strict;"
	
var mainContent= document.getElementById("mainContent");
mainContent.setAttribute("align","center");

secondRow = document.getElementById("secondRow");
console.log(secondRow.innerHTML);

var newHead = document.createElement("h3");
var newPara = document.createElement("p");
var newImg = document.createElement("img");


newHead.innerHTML = "the new header for this div";
newPara.innerHTML = "the fancy new text for the new div";
newImg.src = "/img/imgSml.jpg";

document.getElementById("secCo").appendChild(newHead);
document.getElementById("secCo").appendChild(newPara);
document.getElementById("secCo").appendChild(newImg);

also for the image variable. do i need the .src? i tried it first w/out. saw a stackoverflow bit of advice that had the .src

thx all
D

2

You need both a src and an alt to create an image.

The code you have shown does not have the secCo id in it - without seeing the complete code it is difficult to tell what is wrong.

Do you get any errors in the console?

3

Seems to work for me. The real issue must be somewhere else.

4

awww puppy!
Thank you all. Yes, will put the alt. i do on real live pages but it’s a good habit to do it always i suppose.
And yes Jeff. am embarrassed to say it was a typo i had missed, I put in the puppy url and it worked fine. so i double checked my code and found the typo.
Thank you all!
D

5

Not part of fixing the problem, but just want to throw this nit pick out there:

mainContent.setAttribute("align","center");

should be

mainContent.setAttribute.style.textAlign = "center";

The div align element is not technically supported in HTML5. Basically, most any HTML formatting (non-CSS) is considered to be deprecated. Using these attributes may cause headaches down the road because CSS overrides them.

6

Thank you mawburn. the tutorial i’am watching must be a bit dated then.
but

var mainContent= document.getElementById("mainContent");
mainContent.setAttribute.style.textAlign = "center";

did not go over well. says undefined…but i defined the variable w/var…

7

doh

mainContent.style.textAlign = "center";

Sorry. My fault.

8

:wink: yeah right…you just wanted to see if i was going to try it out!
d