ループテキストがhtml内に印刷されない

私はNewYork Time APIからフェッチしている記事の見出しを表示したいウェブページを持っていますが、nodejも使用していますが、問題は記事が"サンプルテキスト"が印刷されるように内部に印刷する必要がありますが、内部に印刷する方法はありますか？ http://imgur.com/sNmbqeN ループテキストがhtml内に印刷されない

     <div class="card"> 
          <div class="header"> 
           <h3 class="title"><center><b>Chronicle</b></center></h3> 
          </div> 
          <body> 
           <p id="headline">SAMPLE TEXT</p> 
           <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.9/p5.js"></script> 
           <script> 
           var url = "https://api.nytimes.com/svc/search/v2/articlesearch.json"; 
           url += '?' + $.param({ 
            'api-key': "removed", 
            'q': "Trump" 
           }); 
           $.ajax({ 
            url: url, 
            method: 'GET', 
           }).done(function(result) { 
            var articles = result.response.docs; 
            for (var i=0; i<articles.length;i++) 
            { 
             document.createElement('div'); 
             document.createElement("H1"); 
             var h = document.createElement("H1"); 
             var t = document.createTextNode(articles[i].headline.main); 
             h.appendChild(t); 
             document.body.appendChild(h); 
            } 

           }).fail(function(err) { 
            throw err; 
           }); 
           </script> 


          </body>

出典

2017-05-17 Titanz

コンソールにエラーがありますか？ – tech2017

あなたのページには何個のbodyタグがありますか？ divの中央にあるものを見ると、ドキュメントの全体的なbodyタグが1つあると思います。したがって、document.body.appendChild（h）;そのボディに追加されています。 –

@techLoveいいえ、エラーはありません。 – Titanz

それはあなたがあなたの「document.body.appendchild」行で行うにはJavaScriptを求めているものですので、あなたの記事がページの最後に挿入されています。あなたが取得した記事は、特定のdivまたはpタグに行きたい場合は、このような何かを：

<p id="articles">Articles listed below:</p> 
<script> 
    var newArticle = document.createElement("div"); 
    var h = document.createElement("H1"); 
    h.appendChild(document.createTextNode("Header")); 
    newArticle.appendChild(h); 
    var t = document.createTextNode("New article text"); 
    newArticle.appendChild(t); 
    document.getElementById("articles").appendChild(newArticle); 
</script>

私はNYTのAPIを使用して、元のコードをテストすることはできませんが、あなたはそれがありますどのように見ることができるはずです上記のコードで少なくとも実行されます。

出典

2017-05-17 14:56:13 SactoJosh

すべてが機能していますが、私はテキストフィールドを追加しました。ユーザーがsubmitを押すと関数が呼び出されます（スクリプトの下にあるすべてのコードを関数にしました）。問題は、ユーザーが「オバマ」と入力してEnterを押すとニュースが表示されますが、その後に「trump」と入力すると古いニュースの最後に取り込まれたニュースが印刷されます。それは可能ですか？ – Titanz

ありがとう、それによって達成されました：document.getElementById（ 'articles'）。innerHTML = ''; – Titanz

あなたはそれを把握できたことをうれしい！ – SactoJosh

ループテキストがhtml内に印刷されない

答えて

関連する問題