Need proper order of iScroll5 parts

JavaScript
1

I am able to pinch/zoom an image if I have the iScroll5 JavaScript in this order on a plain HTML page, but it doesn’t pinch/zoom when wrapped around database results.

It works in a plain HTML page in this order:

HEAD

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=0.1, maximum-scale=1.0"> 

<style>] iscroll style stuff goes here ]</style>

<script type="text/javascript" src="js/iscroll-zoom.js"></script>

function loaded() { // http://iscrolljs.com/
	myScroll = new IScroll('#wrapper', {
		zoom: true,
		zoomMin: 0.1,
		scrollbars: false,
		scrollX: true,
		scrollY: true,
		tap: true,
		HWCompositing: false
	});
}

function returnTo() {
	window.location="index.html";
}
</script>

BODY

<body onload="loaded()">

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

<script>
var newWP = document.createElement('img');
newWP.src = '0buggies/buggies/wallpaper.jpg';
document.getElementById('output').appendChild(newWP);
</script>

</body>

In the database version, putting the elements in the same order does not result in pinch/zoom. Somehow the iscroll code is not recognizing the database result (which is one image pulled from the database that the user chose).

I have, in my latest shuffling of contents:

HEAD

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=0.1, maximum-scale=1.0"> 

<style>[ iscroll style stuff goes here ]</style>

<script type="text/javascript" src="js/iscroll-zoom.js"></script>

BODY

<body>

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

<script>
[ database query and results ]

function querySuccess(tx, results) {
	console.log("~ ~ ~ ~ ~  querySuccess display_pic");
	var path = results.rows.item.category + 
		"/" + results.rows.item.subcat + 
		"/" + results.rows.item.filename_lg;
	var newWP = document.createElement('img');
	newWP.src = path;
	document.getElementById('output').appendChild(newWP);
	loaded();
}
function returnTo() {
	window.location="index.html";
}

function loaded() { // http://iscrolljs.com/
	myScroll = new IScroll('#wrapper', {
		zoom: true,
		zoomMin: 0.1,
		scrollbars: false,
		scrollX: true,
		scrollY: true,
		tap: true,
		HWCompositing: false
	});
}

</script>
</body>

Because it works in plain HTML, I think there must be something wrong with the order it appears in the database version. Thoughts?

2

If I go back to innerHTML like this:

function querySuccess(tx, results) {
		document.getElementById("output").innerHTML = "<a href='index.html'><img id='rect' src='" + results.rows.item(i).category +
		"/" + results.rows.item(i).subcat +
		"/" + results.rows.item(i).filename_lg +
		"'></a>";

}

For the body like this:

<div id="wrapper"><div id="scroller">
	<ul><li id="output">
	</li></ul>
</div></div>

The image shows up, but doesn’t zoom or accept the a href tap.