Question

我是Javascript的新手，所以这可能不是最好的方法。我正在做Bellycard's web app challenge #1以获得乐趣。

我查询他们的搜索端点，它返回JSON，如下所示：https://rdio-service.herokuapp.com/search?q=korn（点击它）

我获得了唯一的搜索类型：

//artist, album, tracks
var searchTypes = $.unique(data.data.map(function(d) {return d.type}));

然后我迭代searchTypes并过滤那个 data的原始searchType JSON。我学会了如何.appendChild到GUI上的现有项目就好了。但我不知道如何在每个searchType下显示结果。代码如下。

//iterate searchTypes and display them foreach searchType
for(var i = 0; i < searchTypes.length; i++)
{
    var searchType = searchTypes[i];
    var newDiv = document.createElement('div');
    newDiv.id = searchType + "Result";

    //and then, each search type should have results for their type
    //select specific type for this iteration and put it in a results array
    var resultsThisType = data.data.filter(function (f) {
        return f.type ==  searchType;
    });

    for(var j = 0; j < resultsThisType.length; j++) {
        var newP = document.createElement('p'); //put it in a 'p' item for now, for testing
        newP.id = searchType + i + j;
        newP.innerHTML = resultsThisType[i].name; //test
        document.getElementById(searchType + "Result").appendChild(newP); //error here... what's the right approach?
    }

    newDiv.className = "typeResult";
    newDiv.innerHTML = "<h2>" + searchType + "</h2>";
    document.getElementById("results").appendChild(newDiv);
}

Answer 1

问题是你在尝试在添加到DOM之前找到“创建”的div。在您的代码中，您使用以下命令创建父div：

var newDiv = document.createElement('div');
newDiv.id = searchType + "Result";

但是您永远不会将newDiv添加到页面上的DOM结构中。因此，它只存在于内存中，直到你的最后一行：

document.getElementById("results").appendChild(newDiv);

所以当你试图在这里找到元素时：

document.getElementById(searchType + "Result").appendChild(newP);

找不到元素且该方法不存在，因为getElementById()返回null，因为DOM中没有元素存在该ID。

相反，在这种情况下你需要做的是使用像这样的实际父变量：

newDiv.appendChild(newP);

请参阅，document.getElementByID()仅查找当前添加到DOM结构的元素。它不会在内存中找到任何东西。这就是你需要使用之前创建的实际变量的原因。将newDiv添加到最后一行的DOM后，将添加它的所有子项。

另一种选择是在创建它之后和创建它的子元素之前立即将newDiv添加到DOM。然后，只有这样才能使用getElementByID()并访问该元素。

可能需要准确地讨论哪个命令。但在某些情况下，您可能只想在有子项时添加父项（newDiv）。因此，在这种情况下，您可能需要等待将其添加到DOM，直到您确定它有子项为止。

从json数组动态创建和嵌套DIV项

1 个答案: