How to append an image in JavaScript?

Question

I'm very new to javascript so I apologize if this is a dumb question. I'm trying to write a function that will append a certain image next to an element depending on if it is true or false. I'm getting an error when I say src.appendChild(CorrectImg), it says "Cannot read property appendChild of null..."

function check(bool, id) {
  var CorrectImg = document.createElement("CorrectImg");
  CorrectImg.src = "correct.png"
  var WrongImg = document.createElement("WrongImg");
  WrongImg.src = "wrong.png";

  if (bool) {
    var src = document.getElementById(id);
    src.appendChild(CorrectImg);
    return;
  }

  var src = document.getElementById(id);
  src.appendChild(WrongImg);
 }

should be a dupe of https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element but createElement is also wrong. — epascarello, Sep 26 '17 at 01:45
CorrectImg is an image on my computer that will show up next to the element that is correct. In this case, I have a form with first and last name entries. If the entries for these only include alphanumerics then the CorrectImg should show up next to them. If they include something other than alphanumerics then the WrongImg should pop up. — Java_Noob, Sep 26 '17 at 01:46
In html I have Fname and Lname elements that I want the correctImg and WrongImg to show up next to. I don't have any image elements in html. — Java_Noob, Sep 26 '17 at 01:55
because `createElement("CorrectImg")` should be `createElement("img")`? — epascarello, Sep 26 '17 at 01:58
I'm lost, the only place I create correctImg and WrongImg are in this js function. — Java_Noob, Sep 26 '17 at 01:58
yes but you are not creating image elements. when you append the elements you would have this ``. You are NOT appending an image. Do you understand now? — epascarello, Sep 26 '17 at 02:09
There is a set of HTML elements you are allowed to create, unless you're doing some funky stuff such as feature detection. (https://github.com/Modernizr/Modernizr/blob/5eea7e2a213edc9e83a47b6414d0250468d83471/src/html5shiv.js#L44). You can't just make up elements and expect it to work correctly. — Phix, Sep 26 '17 at 02:09

score 0 · Answer 1 · answered Sep 26 '17 at 01:47

function check(bool, id){
 var CorrectImg = document.createElement("img");
 CorrectImg.src = "correct.png"
 var WrongImg = document.createElement("img");
 WrongImg.src = "wrong.png";


 if(bool){
    var src = document.getElementById(id);
    src.appendChild(CorrectImg);
    return;
 }

 else{

    var src = document.getElementById(id);
    src.appendChild(WrongImg);
    return;
      }
 }

score 0 · Answer 2 · answered Sep 26 '17 at 02:10

The main issue wrong here is that you aren't ever creating a img element. Looking at the docs for document.createElement() you will see that the first parameter should be the name of the HTML element you wish to create.

So your code:

var CorrectImg = document.createElement("CorrectImg");
 CorrectImg.src = "correct.png"
 var WrongImg = document.createElement("WrongImg");
 WrongImg.src = "wrong.png";

Should actually be:

var CorrectImg = document.createElement("img");
CorrectImg.src = "correct.png"
var WrongImg = document.createElement("img");
WrongImg.src = "wrong.png";

How to append an image in JavaScript?

2 Answers2