Learning alternative to innerHTML

JavaScript
1

I’m learning a new synax to use in place of innerHTML. But the screen is still blank instead of displaying the jpg. Here is what I have:

In the <script>:

	var newWP = document.createElement('img');
	document.getElementById('output').appendChild('newWP');
	newWP.getAttribute('src');
	newWP.setAttribute('src', '0buggies/0118_buggies/wallpaper_18b2.jpg' );

In the body:

<div id='wrapper'><div id='scroller'>
	<ul><li><a id='output' href='index.html' onclick='returnTo()'></a></li></ul>
</div></div>

Is my syntax wrong? This is as I understood it from the course in lynda.com.

Thanks!

2

You have a typo. newWP is a var, not text.

document.getElementById('output').appendChild(newWP);

If you want to make it a little cleaner, you have alot more going on than is needed.


var newWP = document.createElement('img');
newWP.src = '0buggies/0118_buggies/wallpaper_18b2.jpg';
document.getElementById('output').appendChild(newWP);
3

do the setAttributes before the appendChild. It is better if everything visible in the page gets updated at once.

4

Oh, great, now it works! Thanks to you both for clearing that up. I’l amend my notes…