jquery not inserting html or text inside div

Question

I have the following code inside a webpage:

<div id="search_suggest"></div>

Trying to use the following inside a javascript code changes the content inside the div brackets.

var ss = document.getElementById('search_suggest');
ss.innerHTML = 'asdasdasasddasasdasdasdasdasdasdasdasasdasd';

The following code, using Jquery as a selector, doesnt work (I checked, I'm selecting the right element):

  var ss =$(".search_suggest")
  ss.append( "<p>Test</p>"); #doesnt work
  ss.html("<p>Test</p>"); #doesnt work
  ss.text("<p>Test</p>"); #doesnt work

I also tried with plain text instead of html. Anyone have any ideas as why one works and the other doesn't? I don't believe I'm doing the tesxt or html wrong.

Use id selector # change $("#search_suggest") instead of $(".search_suggest") — Parth Trivedi
– Parth Trivedi, Commented Jan 7, 2016 at 13:01
Its because you are selecting by a class name while u have assigned an ID with that name to your element — Ahs N
– Ahs N, Commented Jan 7, 2016 at 13:01

Milind Anantwar · Accepted Answer · 2016-01-07 13:06:07Z

4

search_suggest is ID of element. Use id selector # instead of class selector .:

$("#search_suggest")

edited Jan 7, 2016 at 13:06

answered Jan 7, 2016 at 13:00

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

virgula24 Over a year ago

it worked! I've seen to have been using the # for class and . for id. Strangely enough, nothing has broke so far. Thanks

Milind Anantwar Over a year ago

@virgula24: you were doing opposite of what needs to be done. use # for ID and . for class

Siraj Hussain · Accepted Answer · 2016-01-07 13:04:16Z

2

In Jquery selectors # is used to getElementById is while . is used to getElementsByClassName.

use this var ss =$("#search_suggest") instead of var ss =$(".search_suggest")

answered Jan 7, 2016 at 13:04

Siraj Hussain

8749 silver badges25 bronze badges

Comments

Mushahid Khan · Accepted Answer · 2016-03-04 12:59:40Z

2

Suggestion

If you must use a class or attribute selector, you can improve performance by specifying the optional context parameter.

ID is absolutely the **fastest**. Part of the reason is that ID is supposed to be unique, so the API stops searching after the ID is found in the DOM.

Better to use ::

$(".classname", "#idname")

edited Mar 4, 2016 at 12:59

answered Jan 7, 2016 at 13:11

Mushahid Khan

2,8441 gold badge21 silver badges32 bronze badges

Collectives™ on Stack Overflow

jquery not inserting html or text inside div

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related