Question

我编写了以下代码来遍历对象并在浏览器中显示它：

function showSearchResults(resultsObj) {
    var results = resultsObj.hits
    for (var i=0;i<results.length;i++) {
        resultsDiv.innerHTML += '<div class=\'ultimate-search-result\'>' + results[i].description;
        if (results[i].linktoken) {
            resultsDiv.innerHTML += '<a href=\'' + results[i].linktoken + '\'><i class=\'icon-pencil\'></li></a>';
        }
        if (results[i].linkpart) {
            resultsDiv.innerHTML += '<a href=\'' + results[i].linkpart + '\'><i class=\'icon-info-sign\'></li></a>';
        }
        resultsDiv.innerHTML += '</div>';
    }   
}

当我在浏览器中运行代码时，链接图标显示在说明的下方，当我检查Chrome中的代码时，div在结果描述行的末尾而不是在代码之后的链接图标之后关闭应该在链接后插入。在Firefox中我遇到了同样的问题。

错误可以在以下小提琴http://jsfiddle.net/v6DjA/

中看到

Answer 1

好的，所以浏览器不喜欢你如何添加到div。然后将其分解为变量然后附加到该变量然后将其添加到endHTML的末尾。见下面的例子。

var html = "";
for (var i = 0; i < results.length; i++) {
    html += '<div class=\'ultimate-search-result\'>' + results[i].description;
    if (results[i].linktoken) {
        html += '<a href=\'' + results[i].linktoken + '\'>link 1</a>';
    }
    if (results[i].linkpart) {
        html += '<a href=\'' + results[i].linkpart + '\'>link 2</a>';
    }
    html += '</div>';
}
resultsDiv.innerHTML = html;

以下是fiddle的链接。

Answer 2

我认为您需要一次写入innerHTML。浏览器看到div被添加为'<div class=\'ultimate-search-result\'>' + results[i].description的一部分并自动关闭，因为它认为您将其删除了。

我建议将新HTML存储在var中，然后立即写入innerHTML：

function showSearchResults(resultsObj) {
    var results = resultsObj.hits;
    var html = '';
    for (var i=0;i<results.length;i++) {
        html += '<div class=\'ultimate-search-result\'>' + results[i].description;
        if (results[i].linktoken) {
            html += '<a href=\'' + results[i].linktoken + '\'><i class=\'icon-pencil\'></li></a>';
        }
        if (results[i].linkpart) {
            html += '<a href=\'' + results[i].linkpart + '\'><i class=\'icon-info-sign\'></li></a>';
        }
        html += '</div>';

        //now write output
        resultsDiv.innerHTML = html;
    }   
}

Answer 3

浏览器在第一行为您关闭div。

    resultsDiv.innerHTML += '<div class=\'ultimate-search-result\'>' + results[i].description;

所以你看到div结束了。

htmlData = "";
for (var i=0;i<results.length;i++) {
    htmlData += '<div class=\'ultimate-search-result\'>' + results[i].description;
    if (results[i].linktoken) {
        htmlData  += '<a href=\'' + results[i].linktoken + '\'><i class=\'icon-pencil\'></li></a>';
    }
    if (results[i].linkpart) {
        htmlData  += '<a href=\'' + results[i].linkpart + '\'><i class=\'icon-info-sign\'></li></a>';
    }
    htmlData  += '</div>';
}   
resultsDiv.innerHTML=htmlData;

http://jsfiddle.net/v6DjA/5/

浏览器添加错误的地方

3 个答案: