1

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

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

谢谢大家的帮助。对此，我真的非常感激。

4

4 回答 4

2

将您的列表和项目制作成模板并使用 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)
        )
    );

由于您似乎才刚刚开始，因此这里有一个很好的参考，可以帮助您朝着正确的方向开始。我不会一章一章地依赖一本书来到达你想去的地方。这是乏味和不现实的。制定目标并进行一些研究，一次将其视为合理且适用的问题，而不是立即解决整个语言问题。

于 2013-06-18T19:44:31.453 回答
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>

这是你的 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);

这是演示当然对每个属性都这样做

于 2013-06-18T20:00:15.597 回答
2

纯 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(", ")));
}

演示在这里。

于 2013-06-18T20:06:31.187 回答
1

如果您碰巧使用jQuery ，这是一个快速的解决方案：

示例（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');
});
于 2013-06-18T19:59:34.937 回答