jQuery中prepend添加元素时首个元素显示为文本的问题

嘿，我一眼就发现问题所在啦——你拼接的HTML字符串里藏着多余的空格，这才导致第一个元素被当成纯文本显示！

问题根源 #

你写的HTML片段里，标签与尖括号之间、属性符号前后都加了不必要的空格，比如：

'< div class= "item" >'

这种格式不符合标准HTML语法，浏览器会把它当成普通文本处理，而不是解析成<div>元素。

修正后的代码 #

把这些多余的空格去掉，让HTML标签和属性保持标准格式就可以正常渲染了：

JavaScript代码

var data = [{ firstname: 'foo', lastname: 'bar' }];
$(".mydiv").prepend(
    '<div class="item">' +
    '<div class="flyout-content">' +
    '<h5>' + data[0].firstname + '</h5>' +
    '<h3>' + data[0].lastname + '</h3>' +
    '<h4>test</h4>' +
    '</div>' +
    '</div>'
);

HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv"></div>

额外小提示 #

如果拼接的HTML结构比较复杂，推荐使用ES6模板字符串（`语法）来拼接，可读性更强，也不容易犯这种空格错误：

$(".mydiv").prepend(`
    <div class="item">
        <div class="flyout-content">
            <h5>${data[0].firstname}</h5>
            <h3>${data[0].lastname}</h3>
            <h4>test</h4>
        </div>
    </div>
`);

内容的提问来源于stack exchange，提问作者Ali Mardini