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