# Add External JavaScript Example - How to add a img?

**URL:** <https://discourse.mozilla.org/t/add-external-javascript-example-how-to-add-a-img/54386>\
**Category:** Learn\
**Created:** [February 20, 2020, 8:10am UTC](https://discourse.mozilla.org/t/add-external-javascript-example-how-to-add-a-img/54386 "2020-02-20T08:10:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![DigitalEngine](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/digitalengine/32/34430_2.png) [@DigitalEngine](https://discourse.mozilla.org/u/DigitalEngine)\
**Post date:** [February 20, 2020, 8:10am UTC](https://discourse.mozilla.org/t/add-external-javascript-example-how-to-add-a-img/54386/1 "2020-02-20T08:10:17Z")

</div>

Ref: the [External JavaScript](https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#External_JavaScript) sub-lesson.  
In the above lesson example (code below) , to make it even more interesting,  
how would I, in addition to the `<p>`, add an `<img>`?

```auto
function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

```

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [February 20, 2020, 9:31am UTC](https://discourse.mozilla.org/t/add-external-javascript-example-how-to-add-a-img/54386/2 "2020-02-20T09:31:38Z")

</div>

@DigitalEngine the process for creating an image would be very similar to the paragraph. Create a new DOM element:

```auto
let img = document.createElement('img');

```

Populate the `<img>` element with the image you want to display (this starts the image loading from the server):

```auto
img.src = 'path/to/my/image.png'

```

And then add the image to the page:

```auto
document.body.appendChild(img);

```

Of course, when you are running the example online rather than locally, you might want to wait until the image is loaded before appending it to the page, so something like this would be more robust:

```auto
let img = document.createElement('img');

img.addEventListener('load', function() {
  document.body.appendChild(img);
});

img.src = 'path/to/my/image.png'

```

---

<div class="post-metadata">

**Author:** ![DigitalEngine](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/digitalengine/32/34430_2.png) [@DigitalEngine](https://discourse.mozilla.org/u/DigitalEngine)\
**Post date:** [February 20, 2020, 5:36pm UTC](https://discourse.mozilla.org/t/add-external-javascript-example-how-to-add-a-img/54386/3 "2020-02-20T17:36:06Z")

</div>

Thanks Chris!  
So for the benefit of other students, using your help, this is what I came up with (a little extra added in too). I also changed some of the nomenclature from the original examples in order to hopefully illustrate what is happening here.  
Using your first example;

```
function createResponce() {
	  let heading = document.createElement('h2');	 
	  heading.textContent = 'You clicked the button! Why did you do that!';
	  document.body.appendChild(heading);
	  
	  let para = document.createElement('p');
	  para.textContent = 'What will happen if you click the button again?';
	  document.body.appendChild(para);
	  
	  let fireTruck = document.createElement('img');
	  fireTruck.src = '../../images/fire-truck-320.png'
	  document.body.appendChild(fireTruck);
	}
	
	const buttons = document.querySelectorAll('button');
	
	for(let i = 0; i < buttons.length ; i++) {
	  buttons[i].addEventListener('click', createResponce);
	}

```

or using your second example;

```
function createResponce() {
let heading = document.createElement('h2');
heading.textContent = 'You clicked on the button! Why did you do that!';
document.body.appendChild(heading);

let para = document.createElement('p');
para.textContent = 'See what happens if you click the button again!';
document.body.appendChild(para);

let fireTruck = document.createElement('img');

fireTruck.addEventListener('load', function() {
	document.body.appendChild(fireTruck);
});

fireTruck.src = '../../images/fire-truck-320.png';	
}

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createResponce);
}

```

Three different examples are linked;

1. [Apply JavaScript example (internal script)](https://risingthunder.github.io/code/java-projects/apply-javascript.html)
2. [Apply JavaScript External](https://risingthunder.github.io/code/java-projects/apply-javascript-external.html) (uses Chris’s second example)
3. [Inline JavaScript handlers](https://risingthunder.github.io/code/java-projects/inline-javascript-handlers.html)

A picture says a thousand words, and in this case the images really helped me understand how this javascript works! Thanks again Chris!

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [February 21, 2020, 11:35am UTC](https://discourse.mozilla.org/t/add-external-javascript-example-how-to-add-a-img/54386/4 "2020-02-21T11:35:41Z")

</div>

@DigitalEngine very nice, thanks for sharing!