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

Question

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) ?

Escape the `/` as well. All characters listed in http://api.jquery.com/category/selectors/. — Felix Kling, Jan 10 '13 at 09:39
Do a http://jsFiddle.net/ Then you can play around with the id and see if it is your special chars that don't work! — mortb, Jan 10 '13 at 09:40
similar question: http://stackoverflow.com/questions/9750670/jquery-1-7-1-seemingly-cant-handle-html5-element-ids — Dziad Borowy, Jan 10 '13 at 09:41
In your jq() function, you shouldn't return extra '#' as it make double '##' as you are using it — A. Wolff, Jan 10 '13 at 09:41

Andy Ray · Answer 1 · 2016-09-21T03:29:52.600

7

Do this:

$('[id="ftbutton_1357567084/Team:8/User:10/Image:195"]');

It's actually a bit of an interesting question. Most likely jQuery thinks : is initiating a filter, like $('div:visible') and getting gunked up not realizing it's a full ID.

edited Sep 21 '16 at 03:29

answered Jan 10 '13 at 09:39

Andy Ray

30,372
14
101
138

He is escaping the `:` though. – Felix Kling Jan 10 '13 at 09:42
wish I could +1 again for your edit! This is meta-data shoehorned into an id :grr: – Jamiec Jan 10 '13 at 09:42
Fabulous Answer......works for me :) Will accept as soon as i able to......Thanks a Ton – Salil Jan 10 '13 at 09:50
1

Just note that this is obviously slower than using an ID selector. – Felix Kling Jan 10 '13 at 09:50
This is, IMHO, overkill and does not resolve the actual question on why his current method doesn't work. It's also slower as @FelixKling mentioned. – Chris Jan 10 '13 at 09:52
@Andy Ray:- +1 for your answer but accepting `Abody97` answer as it seems faster. thanks for your answer though. I wish i could accept two answers :( – Salil Jan 10 '13 at 10:00

score 2 · Answer 2 · edited May 23 '17 at 12:09

/ is a meta character, you have to escape it as well:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.

So this should work fine:

function escape_selector( selector ) {
  return selector.replace( /([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1" );
}

(As roasted mentioned in his comment, you need to drop the '#' + as well, otherwise you add it twice to the selector).

DEMO

score 2 · Accepted Answer · answered Jan 10 '13 at 09:49

2

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

answered Jan 10 '13 at 09:49

Chris

26,544
5
58
71

Thanks.....i also check by removing `"#" +` from `function jq( myid )`......but still it doesn't work :( – Salil Jan 10 '13 at 09:54
@Salil Notice that you have to escape the `/` as well. See how I edited the Regex in `jq` above. – Chris Jan 10 '13 at 09:54

score 0 · Answer 4 · answered Jan 10 '13 at 09:53

0

The simplest answer seems to be:

function jq( myid ) {
  return $(document.getElementById(myid));
}

jq(myid).html(...);

answered Jan 10 '13 at 09:53

A. Wolff

74,033
9
94
155

I believe that's already kinda mentioned in [another answer](http://stackoverflow.com/a/14254924/364869). – Chris Jan 10 '13 at 09:56
Ya, its just to clarify and i think its the best way/fastest to do it – A. Wolff Jan 10 '13 at 09:56

score -4 · Answer 5 · answered Jan 10 '13 at 09:42

-4

the correct function is:

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

answered Jan 10 '13 at 09:42

Tim Lang

1
1

No, he does not want to select any element inside the function, he wants to modify the string to make it a proper selector. Besides, the code would throw an error because jQuery does not have a `.replace` method. – Felix Kling Jan 10 '13 at 09:45

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

5 Answers5