使用JS和foreach循環/覆蓋覆蓋一個div

Question

我正在尋找覆蓋使用JS的div，但問題是，我使用append所以腳本不斷寫入數據在div的末尾，我不知道如何解決這個問題，我嘗試了window.location.reload(true)，但顯然數據丟失了。 有人可以指向我正確的方向，實際上我迷路了。我的目標是刷新/擦除或更新div內容，最好是重新加載頁面。這是一個可運行的代碼，所以你可以看到問題。感謝您的幫助。

$("#getnews").on("click", function() { 
 
    setTimeout(function() { 
 

 
    var path = "https://api.iextrading.com/1.0/stock/" 
 
    var stock = document.getElementById('userstock').value 
 
    var end = "/news" 
 

 
    var url = path + stock + end 
 

 
     $.getJSON(url, function(data) { 
 
      data.forEach(function (article) { 
 
       $('#data').append(
 
        $('<h4>').text(article.headline), 
 
        $('<div>').text(article.summary), 
 
        $('<hr>').text(" "), 
 
       ); 
 

 

 
      }); 
 
     }); 
 
},200); 
 

 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 

 

 
<div class="container"> 
 
<p>Search for a stock (E.g: msft, aapl or tsla)</p> 
 
<p><input type="text" id="userstock"></p> 
 
<p><a class="btn btn-dark btn-large text-white" id="getnews">Browse</a></p> 
 
<row id="data"></row> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.js" 
 
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
crossorigin="anonymous"></script>

Answer 1

$("#getnews").on("click", function() { 
 
    setTimeout(function() { 
 

 
    var path = "https://api.iextrading.com/1.0/stock/" 
 
    var stock = document.getElementById('userstock').value 
 
    var end = "/news" 
 

 
    var url = path + stock + end 
 

 
     $.getJSON(url, function(data) { 
 
      var html = $("<div></div>"); 
 

 
      data.forEach(function (article) { 
 
       html.append($('<h4>').text(article.headline)); 
 
       html.append($('<div>').text(article.summary)); 
 
       html.append($('<hr>').text(" "));     
 
      }); 
 

 
      $('#data').html(html); 
 
     }); 
 
},200); 
 

 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 

 

 
<div class="container"> 
 
<p>Search for a stock (E.g: msft, aapl or tsla)</p> 
 
<p><input type="text" id="userstock"></p> 
 
<p><a class="btn btn-dark btn-large text-white" id="getnews">Browse</a></p> 
 
<row id="data"></row> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.js" 
 
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
crossorigin="anonymous"></script>

Answer 2

你就不能置容器中的HTML：

var html = $("<div></div>"); 
html.append($('<h4>').text(article.headline)); 
html.append($('<div>').text(article.summary)); 
html.append($('<hr>').text(" ")); 

$('#data').html(html);