Overwrite a div using JS and foreach loop / append

Question

I'm looking to overwrite a div using JS but the issue is that I'm using append so the script keep writing data at the end of the div, I have no idea how to fix that, I tried window.location.reload(true) but, obviously, the data is lost. Can someone point me to the right direction, actually I'm lost. My goal is to refresh / erase or update the div content, preferably, whiteout reloading the page. Here's a runnable code so you can see the problem. Thanks for you help.

$("#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>

You could just actually overwrite the div `data` instead of appending to it... — James Gould, Aug 24 '17 at 14:34
Possible duplicate of [How to replace innerHTML of a div using jQuery?](https://stackoverflow.com/questions/1309452/how-to-replace-innerhtml-of-a-div-using-jquery) — scrappedcola, Aug 24 '17 at 14:35
@scrappedcola I tried .empty().append(newcontent) is not working. I only have the first row.. — Blacksun, Aug 24 '17 at 14:38
Empty it outside the loop and append your content, order of operations. Think about what you are attempting to solve rather than just randomly throwing code at your browser. — scrappedcola, Aug 24 '17 at 14:44
I'm stuck. Do you think it's a better idea if I print the newcontent on another page (reload) and store the API request data in a variable? @scrappedcola — Blacksun, Aug 24 '17 at 14:49
No. You don't need a reload. Have you tried calling `$('#data').empty()` or `$('#data').html("")` before you call `data.forEach(function (article) {`? If you only see a single row add a breakpoint and step through your code (google `debugging javascript`) to see if you have more than one item in the data object. Ensure you are not emptying the row each iteration. — scrappedcola, Aug 24 '17 at 15:31

combatc2 · Accepted Answer · 2017-08-24T15:54:46.020

$("#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>

@comatc2 Thanks so much but it only print 1 row :) I hate code. — Blacksun, Aug 24 '17 at 15:51

score 0 · Answer 2 · answered Aug 24 '17 at 14:39

0

Can't you just set the HTML of the container:

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

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

answered Aug 24 '17 at 14:39

combatc2

1,215
10
10

Have you tried this method? It's not working for me or maybe I don't know how to include it. Also I didn't get the logic behind that. Thanks anyway. @combatc2 – Blacksun Aug 24 '17 at 14:51
See the new answer I posted above (it includes your original code snippet with the updates I was suggesting). – combatc2 Aug 24 '17 at 15:40

Overwrite a div using JS and foreach loop / append

2 Answers2