1

以下のhtmlにJavaScriptを出力するにはどうすればよいですか。何かを表示しようとしてきましたが、表示されるのは「オブジェクト、オブジェクト」だけです

<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

純粋な 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 に答える
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

リストとアイテムをテンプレートにし、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 に答える
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 に答える