appending table to current page with javascript

Question

I'm a new javascript learner. I am currently trying to append a new table to the existing page by the use of a button. The function takes in a list and prints out the number, its squared and cubed value into a table. When I press the button, the old table is deleted and overwritten by the new table. How would I append the new table onto the page? All advice are appreciated. Here is my code

<!DOCTYPE html>

<html lang="en">

<head>
    <title>
    </title>
    <script>
        function table(a) {
            document.write('<table>');
            document.write("<tr><td>Number</td><td>Square</td><td>Cube</td></tr>");
            for (var i = 0; i < a.length; i++) {
                document.write("<tr><td>" + a[i] + "</td><td>" + Math.pow(a[i], 2) + "</td><td>" + Math.pow(a[i], 3) + "</td></tr>");
            }
            document.write('</table>')
        }

    </script>
</head>

<body>
    <script>
        var list1 = [1, 2, 3, 4, 5, 6];
        table(list1);

    </script>
    <input type="button" onclick="table([7,8,9,10]) " value="dispay table">
    <!-- this button removes overwrites the old table-->
</body>

</html>

Don't use `document.write()` and learn how to use the DOM API. Either look into the raw DOM API or look into jQuery. — zero298, Sep 13 '17 at 18:26
Possible duplicate of [document.write() overwriting the document?](https://stackoverflow.com/questions/19941866/document-write-overwriting-the-document) — zero298, Sep 13 '17 at 18:31

score 0 · Answer 1 · answered Sep 13 '17 at 18:41

Document.write clears the entire page. You should modify the HTML instead.

In the code below I created a div with an ID ("tableDiv") which I can locate in the javascript code (document.getElementById).

The first step clears the html inside (replacing the old table) and then it builds a string of html according to your bit of code. Finally it places that html inside the container.

<!DOCTYPE html>

<html lang="en">

<head>
  <title>
  </title>
  <script>
    function table(a) {
      // remove the old table
      var container = document.getElementById('tableDiv');
      container.innerHTML = "";

      // create table
      var html = "<table id=\"myTable\"><tr><td>Number</td><td>Square</td><td>Cube</td></tr>";

      // add cells
      for (var i = 0; i < a.length; i++) {
        html += ("<tr><td>" + a[i] + "</td><td>" + Math.pow(a[i], 2) + "</td><td>" + Math.pow(a[i], 3) + "</td></tr>");
      }

      // end table
      html += "</table>";

      container.innerHTML = html;
    }
  </script>
</head>

<body>

  <div id="tableDiv">

  </div>

  <input type="button" onclick="table([7,8,9,10]) " value="display table">
  <!-- this button removes overwrites the old table-->

  <script>
    var list1 = [1, 2, 3, 4, 5, 6];
    table(list1);
  </script>

</body>

</html>

score -1 · Answer 2 · edited Sep 13 '17 at 19:47

I would highly recommend looking into this: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append.

If you look at the examples, you can see a better way of working with the DOM, which will include how to create elements, and manipulate them on a webpage.

Regarding your specific question, the .write function seems to overwrite whenever you call it in a new context, so you either need to save all of your text that you create to a list, update the list, then update the DOM, or use the DOM API (which would be much easier).

I've made a JS bin for the harder way, but this still has problems, as it will overwrite the original button.

appending table to current page with javascript

2 Answers2