CODEWITHSUNDEEP
javascriptjquery
Pwan
Pwan

Reputation: 153

Can't get element by class when append()

I have this code in my project.

    var quickmode_list = "";


    quickmode_list += '<div style="height:100px;width:500px;margin-top:0%;margin-right:0%"value="'
        + quicksetup_item
        +'"class="quickmode_block quick_list"><center style="margin-top:20px"><font size="5" style="margin-left:-14%;">'
        +quicksetup_item
        +'</font></center></div>';

       <div id="quickmode_table">
       </div>

and I append this variable to a tag like this

$('#quickmode_table').append(quickmode_list);

So, It does show out in browser and it show out as class = "quickmode_block", but when I do alert($('.quickmode_block').length);

It return me "0". How does it going wrong if there perform like class "quickmode_block" but I can't get it by class?

Upvotes: 2

Views: 124

Answers (2)

shaochuancs
shaochuancs

Reputation: 16226

If quicksetup_item does not end with space, there would be no space before the class attribute.

According to HTML specification (https://www.w3.org/TR/html5/syntax.html#start-tags): "Attributes must be separated from each other by one or more space characters.". Sometimes, browser will tolerate this syntax error by inserting space automatically between attributes. In that case, code will run successfully.

However, it is recommended to follow the HTML specification and add spaces, rather than rely on browser tolerance.

Upvotes: 0

Bart K
Bart K

Reputation: 324

This is because the DOM tree did not manage to refresh between your two JavaScript instruction (appending and alerting).

Better solution would be to use element creators (they are in jQuery) and then you would have the handle to the new element out of the box, you can access it and count the amount of them. It is even more performance friendly than generating html strings and querying the tree.

Upvotes: 1

Related Questions