Question

我前一天问了一个关于获取嵌套在对象内部的数组中的数组长度的问题。既然我能够获得正确的控制台信息，我将获得以下内容来代替文本的位置：

[object HTMLUListElement]

以下是我正在使用的代码（请记住，我一直在搜索论坛以寻求答案，因此可能会有一些代码从不同的建议中遗留下来而无用）：

var experience = document.getElementById('experience');
var entryDescriptions = document.createElement('ul');


for (i = 0; i < resumeData.experience.length; i++) {
    var experienceEntryDiv = document.createElement('div');
    experienceEntryDiv.className = "experienceEntryDiv";
    var entryTitle = '<h1>' + resumeData.experience[i].title + '</h1>';
    var entryOrganization = '<h2>' + resumeData.experience[i].organization + '</h2>';
    var entryYears = '<h1 class="text-right"><small>' + resumeData.experience[i].startYear + ' - ' + resumeData.experience[i].endYear + '</small></h1>';

    for (j = 0; j < resumeData.experience[i].descriptions.length; j++) {
        descriptionCounts = resumeData.experience[i].descriptions.length;
        console.log(descriptionCounts);
        var entryDescItem = document.createElement('li');
        entryDescItem.className = "entryDescItem";
        var entrydesc = document.createTextNode(resumeData.experience[i].descriptions[j]);
        entryDescItem.appendChild(entrydesc);
        entryDescriptions.appendChild(entryDescItem);
    }
    var entryHTML =
        '<div class="entry">' +
        '<div class="row">' +
        '<div class="col-md-9">' + entryTitle + entryOrganization + '</div>' +
        '<div class="col-md-3">' + entryYears + '</div>' +
        '</div>' +
        '<div class="row"><ul>' + entryDescriptions + '</ul><hr /></div>' +
        '</div>' +
        '<br />';
    experienceEntryDiv.innerHTML = entryHTML;
    experience.appendChild(experienceEntryDiv);
}

这是我的数据（有更多数据，我只是展示一个例子）：

var resumeData = {

    experience: [{
            title: 'Title',
            organization: 'Company Name',
            startYear: 2017,
            endYear: 2017,
            descriptions: [
                'Using code stuff',
                'Used more code stuff'
            ]
        },
        {
            title: 'Title',
            organization: 'Company Name',
            startYear: 2017,
            endYear: 2017,
            descriptions: [
                'Using code stuff',
                'Used more code stuff'
            ]
        },
        {
            title: 'Title',
            organization: 'Company Name',
            startYear: 2017,
            endYear: 2017,
            descriptions: [
                'Using code stuff',
                'Used more code stuff'
            ]
        },
        {
            title: 'Title',
            organization: 'Company Name',
            startYear: 2017,
            endYear: 2017,
            descriptions: [
                'Using code stuff',
                'Used more code stuff'
            ]
        }
    ]
}

最初，我试图找出如何在第二个FOR循环中获取长度。这已经解决了，但现在当我拉起页面时，我得到了标题，组织，开始和结束年份，但是对于描述我得到了：

[object HTMLUListElement]

谢谢！

Answer 1

您正在使用DOM对象连接（添加）字符串。

var entryHTML =
        '<div class="entry">' +
        '<div class="row">' +
        '<div class="col-md-9">' + entryTitle + entryOrganization + '</div>' +
        '<div class="col-md-3">' + entryYears + '</div>' +
        '</div>' +
        '<div class="row"><ul>' + entryDescriptions + '</ul><hr /></div>' + //<--HERE
        '</div>' +
        '<br />';

您可以使用Javascript将文本拉出对象，也可以使用entryHTML更新页面，然后使用Javascript附加对象entryDescriptions

Answer 2

我建议使用所有dom节点创建（如代码的第一部分）或所有字符串连接（如第二部分）。

快速（并且非常肮脏，imo）的解决方法是：

...<ul>'+entryDescriptions.innerHTML+'</ul>...

Javascript - 无法显示UL，而是获取[object HTMLUListElement]

2 个答案: