Question

我试图将我的小模板添加到dom但是有些元素缺失我不知道为什么它表现得像笨拙如果有人可以纠正我出了什么问题以及为什么它没有显示这些元素动态切换这个完整的模板显示

这是我的代码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);

在追加不显示元素后： -

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

Answer 1

您缺少ParsingJsonData.UserDescription和'</p>'之间的连接运算符。如果您正确地缩进代码，那么阅读代码会更容易并避免这些错误。我建议您使用以下方法（它也更有效）？

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('');

如果你在JS中生成了很多标记，也许你应该看看一些模板库。

动态dom没有正确追加

1 个答案: