JS Dojo.create help

[MathewSuran]

Hey everyone,
I am trying to incorporate the

dojo.create("a", { href: "foo.html", title: "Goto FOO!", innerHTML: "link" }, dojo.body());

with my code

dojo.create("img", {"class":"", "src": "images/test.jpg"}, 'legendPanel',"last");

to make my image clickable that references a specific url.  Does anyone know how to do this?  Or if there is a better approach using a different method?  Thanks!

[JeffJacobson]

This is how I would do it.

var img = document.createElement("img");
img.src = "images/test.jpg";
var a = document.createElement("a");
a.href = "foo.html";
a.appendChild(img);
document.getElementById("legendPanel").appendChild(a);

Should result in
[HTML]
<a href="foo.html"><img src="images/test.jpg" /></a>
[/HTML]

[MathewSuran]

Thanks for that, I'm going to try that out now.  Does anyone else have any suggestions or comments?

[JeffPace]

amd style

 var a = domConstruct.create('a', {href: links[key], target: "_blank"}, dom.byId('resultLinksTab'));
 var img = domConstruct.create('img', {src: "images/" + key + ".png"}, a);
 domClass.add(img, 'resultLink');

[MathewSuran]

This is the full code:

var legendDijit = new esri.dijit.Legend({
        map: map,
        layerInfos: layerInfo
    }, dojo.create('div'));

    dojo.create("img", {"class":"", "src": "foo.jpg"}, 'legendPanel',"last"); 
    dojo.create("img", {"class":"", "src": "foo1.jpg"}, 'legendPanel',"last"); 
    dojo.create("img", {"class":"", "src": "foo2.jpg"}, 'legendPanel',"last");           

    dojo.byId('legendPanel').appendChild(legendDijit.domNode);

    navigateStack('legendPanel');
    if (dojo.isIE === 8) {
        setTimeout(function () {
            legendDijit.startup();
        }, 100);
    } else {
        legendDijit.startup();
    }

Is there an easier way to incorporate the "a href" code into the dojo.create("img") or somewhere after that references each image?

[JeffPace · Accepted solution]

This is the full code:

var legendDijit = new esri.dijit.Legend({         map: map,         layerInfos: layerInfo     }, dojo.create('div'));      dojo.create("img", {"class":"", "src": "foo.jpg"}, 'legendPanel',"last");      dojo.create("img", {"class":"", "src": "foo1.jpg"}, 'legendPanel',"last");      dojo.create("img", {"class":"", "src": "foo2.jpg"}, 'legendPanel',"last");                 dojo.byId('legendPanel').appendChild(legendDijit.domNode);      navigateStack('legendPanel');     if (dojo.isIE === 8) {         setTimeout(function () {             legendDijit.startup();         }, 100);     } else {         legendDijit.startup();     }

Is there an easier way to incorporate the "a href" code into the dojo.create("img") or somewhere after that references each image?

var a = dojo.create('a', {href: url, target: "_blank"}, 'legendPanel',"last");
dojo.create("img", {"class":"", "src": "foo.jpg"}, a);
var a1 = dojo.create('a', {href: url1, target: "_blank"}, 'legendPanel',"last");
dojo.create("img", {"class":"", "src": "foo1.jpg"}, a1);
var a2 = dojo.create('a', {href: url2, target: "_blank"}, 'legendPanel',"last");
dojo.create("img", {"class":"", "src": "foo2.jpg"}, a2);

[MathewSuran]

Jacob's worked but in the end Jeff's was money.  Big thanks!

[JeffPace]

thanks, and sorry to steal jacob.

I just encourage using AMD dojo at all times.  Helps in the learning of the API as well.

[MathewSuran]

For the project I am working on, for now, is in Legacy.  I would have liked to start learning AMD, but unfortunately I can not convert it at this time (deadlines).  Hopefully it will need a revamp to AMD in the future.  I'm sure I will need assistance on the next project that I will be starting from scratch in AMD.  Thanks again!