CODEWITHSUNDEEP
javascriptjquery
Wajihurrehman
Wajihurrehman

Reputation: 567

Dynamically dom is not appending properly

i am trying to append my small template in in dom but some element's missing i don'nt know why it's behaving like awkward if some one can correct me what's going wrong and why it's not showing these elements dynamically excpet this complete template showing.

here is my code jquery:-

template = '<article id="ProfileBox" class="col-lg-3 ltr">' + 
                       '<div id="ProfileImage" class="Profile_image colored_border">' +
                       '<img src="../images/about-me/' + ParsingJsonData.UserImageUrl + '" class="Rounded-Corners" width="220" height="162">' +
                       '</div>' +
                       '<div id="ProfileContact">' +
                       '<h5 style="text-align: center;">' + ParsingJsonData.UserName + '</h5>' +
                       '<p style="text-align: center;"><strong>Role&nbsp;:&nbsp;</strong><em>' + ParsingJsonData.UserRole + '</em></p>' +
                       '<p style="text-align: center;"><i class="fa fa-mobile FontThemeColor" style="font-size: 15px;"></i>&nbsp; &nbsp;' + ParsingJsonData.UserCellNumber + '</p>' +
                       '<p style="text-align: center;"><i class="fa fa-envelope FontThemeColor" style="font-size: 10px;"></i>&nbsp;' + ParsingJsonData.UserEmailAdress + '</p>' +
                       '</div>' +
                       '</article>' +
                       '<article id="ProfileBox1" class="col-lg-9 ltr">' +
                       '<h3 class="HeadingThemeColor">Describing My Self !</h3>' +
                       '<div class="Profile_divider"></div>' +
                       '<p>' +
                             ParsingJsonData.UserDescription
                       '</p>' +
                       '<div class="Profile_list list-check">' +
                       '<ul id="ProfileCompleteInformation">' +
                           '<li>wajih</li>' +
                       '</ul></div>' +
                       '</article>';
$("#profileID").append(template);

After appending not showing elements:-

'<div class="Profile_list list-check">' +
                           '<ul id="ProfileCompleteInformation">' +
                               '<li>wajih</li>' +
                           '</ul></div>' +

Upvotes: 0

Views: 68

Answers (1)

plalx
plalx

Reputation: 43718

You are missing a concatenation operator between ParsingJsonData.UserDescription and '</p>'. It would be easier to read your code and avoid these mistakes if you would indent it properly. May I suggest you to use the following approach instead (it's also much more efficient)? 

var template = [
    '<article id="ProfileBox" class="col-lg-3 ltr">',
        '<div id="ProfileImage" class="Profile_image colored_border">',
            '<img src="../images/about-me/', ParsingJsonData.UserImageUrl, 
                '" class="Rounded-Corners" width="220" height="162">',
        '</div>'
    //...   
].join('');

If you have a lot of markup generated in JS, maybe you should have a look at some templating libraries.

Upvotes: 2

Related Questions