Why aren't the links I'm adding to the DOM with Javascript clickable?

Question

I'm writing a Bookmarklet to change the behaviour of the google homepage. I love the visual search page preview functionality. Coolest.thing.ever. BUT I'd really like to see what it'd be like if it worked as a LIVE SEARCH as opposed to having to mouseover the links to see it.

So there are a few steps to this - I've got partial functionality working.

Here's the JS code.

javascript: (function() {
    c = document.getElementById('ires');
    nli = document.createElement('div');

    cell = 0;
    for (var Obj in google.vs.ha) {
        na = document.createElement('a');
        na.href = Obj;
        na.style.cssFloat = 'left';
        na.style.styleFloat = 'left';

        nd = document.createElement('div');
        cldiv = document.createElement('div');
        cldiv.style.clear = 'both';
        nd.style.width = google.vs.ha[Obj].data.dim[0] + 'px';
        nd.style.height = google.vs.ha[Obj].data.dim[1] + 'px';
        nd.style.margin = '5px';
        nd.style.padding = '5px';
        nd.style.border = '1px solid #999999';


        if (google.vs.ha[Obj].data.tbts.length) {
            nilDiv = document.createElement('div');
            for (i = 0; i < google.vs.ha[Obj].data.tbts.length; i++) {
                box = google.vs.ha[Obj].data.tbts[i].box;
                newbox = document.createElement('div');
                newbox.className = 'vsb vsbb';
                newbox.style.position = 'relative';
                newbox.style.top = (box.t) + 'px';
                newbox.style.left = box.l + 'px';
                newbox.style.height = box.h + 'px';
                newbox.style.width = box.w + 'px';
                nilDiv.appendChild(newbox);
                newtext = document.createElement('div');
                newtext.className = 'vsb vstb';
                newtext.innerHTML = google.vs.ha[Obj].data.tbts[i].txt;
                newtext.style.top = (box.t) + 'px';
                newtext.style.position = 'relative';
                nilDiv.appendChild(newtext);
            }
            nilDiv.style.height = '0px';
            nd.appendChild(nilDiv);
        }

        for (i = 0; i < google.vs.ha[Obj].data.ssegs.length; i++) {
            ni = document.createElement('img');
            ni.src += google.vs.ha[Obj].data.ssegs[i];
            ni.className += ' vsi';
            nd.appendChild(ni);
        }
        na.appendChild(nd);
        nli.appendChild(na);
    };
    c.insertBefore(nli, c.firstChild);
})();

The way it works at the moment is

1. put the above code in a bookmark
2. search for something on google
3. click the magnifying glass
4. click the bookmark

At the moment, for some reason - the links that get added to the page are not clickable unless there are text boxes on the image preview. As far as my understanding of DOM goes, the whole content of the <a> tag should be clickable.

Anyone know what the problem is?

Other questions I'd like to figure out is how to auto-query the images without requiring the user to click.

Once that's done I'll try to turn the whole thing into an event-listener which auto-queries and displays the images on keyup in the search window.

How cool will that be?! :)

I can't seem to get the bookmarklet to "compile" here on stack but I've got one you can drag into your toolbar here: http://chesser.ca/2010/11/google-visual-image-search-hack-marklet .

or the href should look like this

<a href="javascript:(function(){c=document.getElementById('ires');nli=document.createElement('div');cell=0;for(var Obj in google.vs.ha){na=document.createElement('a');na.href=Obj;na.style.cssFloat='left';na.style.styleFloat='left';nd=document.createElement('div');cldiv=document.createElement('div');cldiv.style.clear='both';nd.style.width=google.vs.ha[Obj].data.dim[0]+'px';nd.style.height=google.vs.ha[Obj].data.dim[1]+'px';nd.style.margin='5px';nd.style.padding='5px';nd.style.border='1px solid #999999';if(google.vs.ha[Obj].data.tbts.length){nilDiv=document.createElement('div');for(i=0;i<google.vs.ha[Obj].data.tbts.length;i++){box=google.vs.ha[Obj].data.tbts[i].box;newbox=document.createElement('div');newbox.className='vsb vsbb';newbox.style.position='relative';newbox.style.top=(box.t)+'px';newbox.style.left=box.l+'px';newbox.style.height=box.h+'px';newbox.style.width=box.w+'px';nilDiv.appendChild(newbox);newtext=document.createElement('div');newtext.className='vsb vstb';newtext.innerHTML=google.vs.ha[Obj].data.tbts[i].txt;newtext.style.top=(box.t)+'px';newtext.style.position='relative';nilDiv.appendChild(newtext);}nilDiv.style.height='0px';nd.appendChild(nilDiv);}for(i=0;i<google.vs.ha[Obj].data.ssegs.length;i++){ni=document.createElement('img');ni.src+=google.vs.ha[Obj].data.ssegs[i];ni.className+=' vsi';nd.appendChild(ni);}na.appendChild(nd);nli.appendChild(na);};c.insertBefore(nli,c.firstChild);})();">bookmarklet</a>

Answer 1

An inline element (a) can not contain a block element (div).

Browsers have different ways of handing incorrect elements like this, but they will try to make some kind of sense out of it. One way to handle the error is to move the block element outside the inline element, which of course means that it's not clickable.

Use span elements instead of div elements, then you can use CSS styles to chance both the link and the span elements into block elements.