How to insert a g:text object inside another html element?

I'm developing a Windows gadget. There is a function called addTextObject on the background object which creates the object I want which I can later add glowing and shadows to it. But the problem is that I am not able to control the objects location. For example, if I want to append it inside a div or span or td, the appendChild method is not working. How can I fix this?

var txtGlow = document.getElementById('imgBackground').addTextObject("test", "Verdana", 25, "Red", 50, 50);
            txtGlow.opacity = 100;
            txtGlow.addGlow("yellow", 50, 50);
            var theDiv = document.getElementById('divx');
            txtGlow.value = theDiv.innerText;
            theDiv.appendChild(txtGlow);

Text and image objects added to the background aren't elements and as such can't be appended to just any element. You can create a <g:text> element in your HTML markup, but they don't behave in the same way:

Note This method does not expose the objects as g:image or g:text elements. You can locate and assign the objects using the document.getElementById("...") method, but the g:image or g:text methods and properties are not available.

You could create the element using document.createElement() or innerHTML.