输出变量到html

Output variable into html

本文关键字：html 变量 输出      更新时间：2023-09-26

如何将javascript输出到下面的html中?我一直试图得到任何显示，但唯一显示的是"对象，对象"

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

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

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

演示。

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

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

使用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)
        )
    );

既然你似乎才刚刚开始，这里有一个很好的小参考，让你在正确的方向开始。我不会依靠一章一章的书来得到你想要的。这既乏味又不现实。制定一个目标，做一些研究，每次选择一个合理的和适用的问题，而不是马上解决整个语言。

如果您碰巧使用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');
});
相关文章：