0

I am trying to create a basic game with ledges you jump on, its always something i wanted to figure out. But my question is, I am using a innerHTML tag to insert a new image every few seconds, but when I do it breakes <br> by itself. How do you add a new image in a innerHTML tag without breaking?

function landT() {
    document.getElementById("land01").innerHTML += "<pre><img src =\'images/platform00.png\'></pre>";
    moveMYP();
}

function moveMYP() {
    var thisTimer = setTimeout(moveMYP, 500);
    moveBlock1 = moveBlock1 - 10;
    document.getElementById("land00").style.left = moveBlock1 + "px";
}
SNLippold
  • 27
  • 6

1 Answers1

1

Your images are inside the pre which is block element.

You can modify the display CSS property to inline or redesign your code to not use the pre tag.

Have you considered using createElement function instead of the innerHTML? The difference is explained here

Community
  • 1
  • 1
Tomasz Kajtoch
  • 632
  • 7
  • 18
  • I am using the createElement but the image refuses to show. – SNLippold Oct 31 '15 at 00:57
  • var block00 = document.createElement("img"); block00.src = "images/platform00.png"; block00 = new Image(); – SNLippold Oct 31 '15 at 01:08
  • @SNLippold You are creating a new element but you don't adding it to the document's DOM. After these lines add something like this: `document.getElementById("land01").appendChild(block00);` – Tomasz Kajtoch Oct 31 '15 at 01:19