, so that the div >> contains the image, or for a div to be appended to the body and for the >> image to be appended to appear within the div? > > This would be one way: > > var mydiv = document.createElement("div"); > var myimg = document.createElement("img"); > myimg.src = "image.png"; > mydiv.appendChild(myimg); > document.body.appendChild(mydiv); As you need that frequently when avoiding .innerHTML, I have written jsx.dom.createElementFromObj() [1]: /* * Equivalent of * document.body.innerHTML += '

' */ var mydiv = jsx.dom.createElementFromObj({ type: "div", childNodes: [ { type: "img", properties: { src: "image.png" } } ] }); document.body.appendChild(mydiv); Being recursive, it already supported the creation of a text node (through a string-typed object as argument), so I added jsx.dom.createNodeFromObj() as alias yesterday. Also, out of necessity in a commercial project, I tweaked it so that it would return a reference to an Array (heretoafter: an Array) of Nodes when passed an Array of string-typed values (for text nodes) or other objects (for element nodes). As I result, I added the alias jsx.dom.createNodesFromObj(), and jsx.dom.appendChildren() and jsx.dom.removeChildren(), which make filling and emptying an element node easy: /* * Equivalent of * parentNode.innerHTML += * 'foo'¹ */ jsx.dom.appendChildren(parentNode, jsx.dom.createNodesFromObj([ "foo", { type: "input", properties: { type: "checkbox", name: "bar", value: "baz" } } ])); // … /* Equivalent of parentNode.innerHTML = "" */ jsx.dom.removeChildren(parentNode, parentNode.childNodes); Now it strikes me that jsx.dom.appendChildren() should return an Array of Nodes created from the passed Array, and jsx.dom.removeChildren() should return an Array of removed Nodes. The methods are not yet namespace-aware. What do you think? _______ ¹ Note that an element object's properties are _not_ equivalent to that element's attributes, although it may appear so in these examples. [1] -- When all you know is jQuery, every problem looks $(olvable).