javascript - DOM appendChild to insert images

Question

I have this code that creates links.

   /* Create a link to activate the tab */
    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;

I need to add an image to the link, but when I try to add the image code:

<img src="typo3conf/ext/ori_proyectos/res/images/interes.png">

I get:

Link<img src="typo3conf/ext/ori_proyectos/res/images/interes.png">

And not: Link[*_*]

Where [*_*] is the image.

The source code display this:

<img src="typo3conf/ext/ori_proyectos/res/images/interes.png">

I don't know how to write it.

Thanks.

Answer 1

You should create the image using own DOM methods too:

Something like this:

var DOM_img = document.createElement("img");
DOM_img.src = "typo3conf/ext/ori_proyectos/res/images/interes.png";

DOM_a.appendChild(DOM_img);

A working example here.