Manipulating where in HTML JS writes HTML

I’m wrestling trying to get my JS to write its HTML into a certain point in the HTML, namely just after the link that calls the JS, and before the final HTML component, at the angry face:

[code=html]
<img src=”dog.jpg” onclick=”catdog”(‘dog’)” />
<img src=”cat.jpg” onclick=”catdog”(‘cat’)” />
😡
</form>
<a href=”javascript:marksheet()”>How did it go?</a>
</body>
</html>

[/code]

So far we have a dog and a cat next to each other. I’m trying to add in a duck and a cow. Here’s the JS so far:

[CODE]
var cow = document.createElement(“img”);
var duck = document.createElement(“img”);
cow.setAttribute(“src”,”cow.jpg”);
duck.setAttribute(“src”,”duck.jpg”);
var docBody = document.getElementsByTagName(“body”)[0];
docBody.appendChild(cow);
docBody.appendChild (duck);
[/CODE]

It seems to always add on the duck and cow pics at the very end of the body – so I guess the line:

docBody.appendChild(cow);

needs amending, but I don’t know how exactly. All thoughts much obliged.

Also in #JavaScript _↴