Question

如何将javascript输出到下面的html中。我一直在尝试显示任何内容，但唯一显示的是“对象，对象”

<h2>title</h2>
<ul>
  <li>rating</li>
  <li>year</li>
  <li>length</li>
  <li>comedy</li>
  <li>main characters</li>
 </ul>

谢谢你帮助大家。我真的很感激。

Answer 1

将您的列表和项目放入模板并使用jquery进行克隆，以便将数据插入到元素中。这是一种相对简单的模式。

var divContainer = $('#divContainer');

for ( var i = 0; i < array.length; i += 1 )
    divContainer.append
    ( 
        $('<ul></ul>').append
        (
            $('<li><li>').innerHtml(" prop Name " + array[i].propName)
        )
    );

Since it seems you are just getting started, here is a good little reference to get you started in the right direction.我不会逐章依赖书来获得你想去的地方。这很乏味且不切实际。制定目标并进行一些研究，一次性解决一个合理且适用的问题，而不是立即解决整个语言问题。

Answer 2

这是你的HTML：

<body id="thebody">
<h2>title: Goodfellas</h2>
<ul>
  <li>rating: R</li>
  <li>year: 1990</li>
  <li>length: 3.25</li>
  <li>comedy</li>
  <li>main characters: James Conway, Henry Hill</li>
  </ul>
</body>

HEre是你的JS

var list = document.createElement("ul");

for (var key in movieList) {
    var title = document.createElement("li");
    var titleText = document.createTextNode("title: " +  movieList[key].title);
    title.appendChild(titleText);  
    list.appendChild(title);
}

 var _body = document.getElementById('thebody');
_body.appendChild(list);

以下是demo当然要对每个属性执行此操作

Answer 3

纯粹的JavaScript有时会对眼睛有点讨厌：

for (var i = 0; i < movieList.length; i++) {
    document.body.appendChild(document.createElement('h2')).appendChild(document.createTextNode('title: ' + movieList[i].title));
    var cUL = document.body.appendChild(document.createElement('ul'));
    cUL.appendChild(document.createElement('li')).appendChild(document.createTextNode(movieList[i].rating));
    cUL.appendChild(document.createElement('li')).appendChild(document.createTextNode(movieList[i].year));
    cUL.appendChild(document.createElement('li')).appendChild(document.createTextNode(movieList[i].length));
    cUL.appendChild(document.createElement('li')).appendChild(document.createTextNode(movieList[i].isComedy));
    cUL.appendChild(document.createElement('li')).appendChild(document.createTextNode('main characters: ' + movieList[i].mainCharacters.join(", ")));
}

Demo here

Answer 4

如果您正好使用jQuery：

，这是一个快速解决方案

Example (jsFiddle)

// loop through the movie list.
$.each(movieList, function() {
    $('<h2>'+this.title+'<h2>').appendTo('#movies');
    $('<ul>').appendTo('#movies');
    $('<li>'+this.rating+'</li><li>'+this.year+'</li><li>'+this.length+'</li><li>'+this.isComedy+'</li>').appendTo('#movies');
    // open the main characters list item.
    var charLi = '<li>main characters: ';
    $.each(this.mainCharacters, function() {
        charLi += this + ', ';
    });
    // remove the extra comma and space.
    charLi = charLi.substring(0, charLi.length - 2);
    // close the list item.
    charLi += '</li>';
    $(charLi).appendTo('#movies');
    $('</ul>').appendTo('#movies');
});

输出变量为html

4 个答案:

Example (jsFiddle)