Thanks for the encouragement Taifun ;)
After a heavy day on the keys yesterday (on AppInventor!), I awoke refreshed and decided to have another crack at resolving this.
I know that this works (the original find on Stack Overflow:
$("body").append( "<img src='"+ folder + val +"'>" );
I also know that this works, including the <a> section:
$("body").append( "<a href=# ><img src='"+ folder + val +"'></a>" );
but couldn't figure out why the onclick part refused to work. Had to break it down and iterate until I got there, hitting hard on the Stack Overflow servers, the answer is usually there somewhere, even if you have to interpret it!
The solution comes from the webViewString needing to be a "string", simply providing it with the variable 'val' was not enough, the output of 'val' needed to be in quotes.
So for this I created another variable with a collection of quotes and slashes:
This then outputted the contents of 'val' with quotes around it.
Eventually, after a few other changes to single and double quotes here and there this is what I came up with:
myval = "\'"+val+"\'"
$("body").append($( '<a href="#"><img src='+ folder + val +' onclick="window.AppInventor.setWebViewString('+myval+')"></a>' ));
With trepidation I loaded up Genymotion emulator and started up my simple test app, clicked on an image and "Hey Presto!" the name of the image in question appeared in the text box. (this is just for testing, I can now take this string and do things with it!)
This is looking like a useful solution for unknown numbers of images/items, cuts down the load on an app (no buttons or images required as assets) and should speed develop in other ways. I know there are some more sexy solution with jquery mobile but this works for me :)
Also made a little video of the thing in action on the emulator