Salil Salil - 2 months ago 6
HTML Question

jQuery("#"+id) Vs document.getElementById(""+id)

I have following id for one of my div

id="ftbutton_1357567084/Team:8/User:10/Image:195"
i want to replace its html after ajax being called.

When i try to do this using jQuery something like following it doesn't work

jQuery("#"+id).html(SOME HTML HERE);


Where as following code works

document.getElementById(id).innerHTML = SOME HTML HERE;


I know ID should not contain some special characters

ID attributes should be = after an initial letter (a-z or A-Z), may also use
periods and colons, in addition to letters, numbers, hyphens, and underscores.


Ref
How do I select an element by an ID that has characters used in CSS notation?


But for some reason i can't change the id of each element as it is thought the site.

I also tried following but it doesn't works

function jq( myid ) {
return "#" + myid.replace( /(:|\.)/g, "\\$1" );
}
jQuery(jq("#"+id)).html(SOME HTML HERE);


I just want to know if this is a case, do i need to use
document.getElementById(""+id)
instead
jQuery("#"+id)
?

OR in other words

Is
document.getElementById(""+id)
is more reliable than
jQuery("#"+id)
?

Answer

The issue is that you're adding the # twice. Once in the function and once in the actual jQuery call. Should be like this:

function jq( myid ) {
  return "#" + myid.replace( /(:|\.|\/)/g, "\\$1" ); //note that added `/`
}
jQuery(jq(id)).html(SOME HTML HERE); //don't add # again!

A slightly unrelated tip: always remember you can initiate a jQuery instance using an actual DOM object:

jQuery(document.getElementById(someId)); //this will work
Comments