如何隱藏<a href> tag in InnerHTML

Question

I have an image that has an InnerHTML for "a href" tag define in the .cs file as shown below.

_divToolTipContainer.InnerHtml = "<a href=\"javascript:__doPostBack('" + btnItemThumbnail.ClientID.Replace("_", "$") + "','')\">" + 
              itemimage; 

Now what I want is to have this "a href" tag "hide" or "set visible to false" if the textbox is empty otherwise have this click-able.

My code is shown below, but its not working.

var oDivA1 = document.getElementById(oElementId); 

    if(val === undefined || val == null || val.length <= 0){   
     oDivA1.style.display = "none"; // not working 
    }else{ 
     oDivA1.style.display = "block"; // not working 
    } 

oDivA1.style.display = "none", this display none for the entire div not the "a href" tag only.

Is that possible?

Thanks

RJ

Answer 1

Use the firstChild property to get the inner element of the div, assuming that's all the HTML it contains as shown in your example.

var oDivA1 = document.getElementById(oElementId); 
var anchor = oDivA1 ? oDivA1.firstChild : null; 

if(anchor && (val === undefined || val == null || val.length <= 0)){   
    anchor.style.display = "none"; 
}else{ 
    anchor.style.display = "block"; 
} 

To prevent the link action

var handler = function(e) { e.preventDefault(); }; 

if(anchor && (val === undefined || val == null || val.length <= 0)){   
    anchor.addEventListener('click',handler,false); 
}else{ 
    anchor.removeEventListener('click',handler,false); 
} 

See https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener以瞭解有關瀏覽器兼容性和舊版瀏覽器的解決方法的信息。