How to insert HTML element via JavaScript? [duplicate]

Question

I want to insert an image into a div tag with the ID "window":

<div id="window">
        <h3 id="score">Score: 0</h3>
        <h3 id="end">End Game</h3>
        <video autoplay muted loop id="myVideo">
            <source src="images/background.mp4" type="video/mp4">
        </video>
    </div>

What my function looks like atm:

function spawn1() {
document.getElementById("window").innerHTML = "<img src='images/redtarget.png' style='width:10%'>";
}

How can I insert an HTML element without using .innerHTML since it replaces everything within my div tag?

it's document.getElementById("window").append('<img src="images/redtarget.png" style="width:10%">') & you might use createElement rather than having the image-element as a string — admcfajn
– admcfajn, Commented Feb 12, 2020 at 5:43
@admcfajn are you sure it's document.getElementById("window").innerHTML.append ? — Abhishek Pandey
– Abhishek Pandey, Commented Feb 12, 2020 at 5:45
Does this answer your question? Adding HTML elements with JavaScript — admcfajn
– admcfajn, Commented Feb 12, 2020 at 5:48

tomerpacific · Accepted Answer · 2020-02-12 05:47:34Z

2

If you want to attach an image into your div you can do the following:

function spawn1() {
    let imageElement = document.createElement('img');
    imageElement.setAttribute('src','images/redtarget.png');
    imageElement.setAttribute('id', 'imageId');   //Use the id for a CSS selector to style it
    let windowDiv = document.getElementById("window");
    windowDiv.appendChild(imageElement);
  }

answered Feb 12, 2020 at 5:47

tomerpacific

6,85118 gold badges42 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sudhir Ojha · Accepted Answer · 2020-02-12 05:53:57Z

1

elem.innerHTML = elem.innerHTML + myNewStuff;

edited Feb 12, 2020 at 5:53

Sudhir Ojha

3,3053 gold badges16 silver badges28 bronze badges

answered Feb 12, 2020 at 5:45

Péter Tajti

762 bronze badges

2 Comments

Igor F. Over a year ago

Code-only answers are discouraged. Please provide an explanation why and how your answer solves the problem.

BDL Over a year ago

@IgorF.: Yes, code-only answers are discouraged. But they should still be reviewed as "Looks OK" in the Low Quality Posts queue. Reference: meta.stackoverflow.com/questions/260411/…

Sarower Jahan · Accepted Answer · 2020-02-12 05:45:23Z

0

Simply concatenate existing html like bellow.

function spawn1() {
    document.getElementById("window").innerHTML = document.getElementById("window").innerHTML + "<img src='images/redtarget.png' style='width:10%'>";
}

Here is the jsfiddle link: https://jsfiddle.net/gpkquwz0/

answered Feb 12, 2020 at 5:45

Sarower Jahan

1,5451 gold badge13 silver badges21 bronze badges

1 Comment

Abhishek Pandey Over a year ago

why don't to store innerHTML in a var instead of writing it again and again

Collectives™ on Stack Overflow

How to insert HTML element via JavaScript? [duplicate]

3 Answers 3

Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Linked

Related