Any alternative to create a dynamic table using JavaScript innerHTML?












0















I want to create a dynamic table in JSP. The data which has to be entered in the table is coming form an array.



var array = data.split("##");


I am currently planning to insert table in the div by innerHTML



document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column
<tr>... <td>...</td></tr></script>
"</table>";


Do you guys have any better way to tackle this? can I remove script from innerHTML string? thanks for the help in advance










share|improve this question




















  • 1





    Yes, see HTMLTableElement.

    – Teemu
    Jan 3 at 6:59











  • @Teemu, Thanks. can you please refer me a code example to go through?

    – Ayush
    Jan 3 at 7:02






  • 2





    There are plenty of examples at MDN, when you're digging deep to the table elements creation.

    – Teemu
    Jan 3 at 7:04











  • it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer

    – user3678149
    Jan 3 at 7:08











  • @user3678149, it will be great if you can help me with the example.

    – Ayush
    Jan 3 at 7:10
















0















I want to create a dynamic table in JSP. The data which has to be entered in the table is coming form an array.



var array = data.split("##");


I am currently planning to insert table in the div by innerHTML



document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column
<tr>... <td>...</td></tr></script>
"</table>";


Do you guys have any better way to tackle this? can I remove script from innerHTML string? thanks for the help in advance










share|improve this question




















  • 1





    Yes, see HTMLTableElement.

    – Teemu
    Jan 3 at 6:59











  • @Teemu, Thanks. can you please refer me a code example to go through?

    – Ayush
    Jan 3 at 7:02






  • 2





    There are plenty of examples at MDN, when you're digging deep to the table elements creation.

    – Teemu
    Jan 3 at 7:04











  • it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer

    – user3678149
    Jan 3 at 7:08











  • @user3678149, it will be great if you can help me with the example.

    – Ayush
    Jan 3 at 7:10














0












0








0








I want to create a dynamic table in JSP. The data which has to be entered in the table is coming form an array.



var array = data.split("##");


I am currently planning to insert table in the div by innerHTML



document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column
<tr>... <td>...</td></tr></script>
"</table>";


Do you guys have any better way to tackle this? can I remove script from innerHTML string? thanks for the help in advance










share|improve this question
















I want to create a dynamic table in JSP. The data which has to be entered in the table is coming form an array.



var array = data.split("##");


I am currently planning to insert table in the div by innerHTML



document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column
<tr>... <td>...</td></tr></script>
"</table>";


Do you guys have any better way to tackle this? can I remove script from innerHTML string? thanks for the help in advance







javascript jquery html jsp






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 7:31







Ayush

















asked Jan 3 at 6:56









AyushAyush

859




859








  • 1





    Yes, see HTMLTableElement.

    – Teemu
    Jan 3 at 6:59











  • @Teemu, Thanks. can you please refer me a code example to go through?

    – Ayush
    Jan 3 at 7:02






  • 2





    There are plenty of examples at MDN, when you're digging deep to the table elements creation.

    – Teemu
    Jan 3 at 7:04











  • it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer

    – user3678149
    Jan 3 at 7:08











  • @user3678149, it will be great if you can help me with the example.

    – Ayush
    Jan 3 at 7:10














  • 1





    Yes, see HTMLTableElement.

    – Teemu
    Jan 3 at 6:59











  • @Teemu, Thanks. can you please refer me a code example to go through?

    – Ayush
    Jan 3 at 7:02






  • 2





    There are plenty of examples at MDN, when you're digging deep to the table elements creation.

    – Teemu
    Jan 3 at 7:04











  • it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer

    – user3678149
    Jan 3 at 7:08











  • @user3678149, it will be great if you can help me with the example.

    – Ayush
    Jan 3 at 7:10








1




1





Yes, see HTMLTableElement.

– Teemu
Jan 3 at 6:59





Yes, see HTMLTableElement.

– Teemu
Jan 3 at 6:59













@Teemu, Thanks. can you please refer me a code example to go through?

– Ayush
Jan 3 at 7:02





@Teemu, Thanks. can you please refer me a code example to go through?

– Ayush
Jan 3 at 7:02




2




2





There are plenty of examples at MDN, when you're digging deep to the table elements creation.

– Teemu
Jan 3 at 7:04





There are plenty of examples at MDN, when you're digging deep to the table elements creation.

– Teemu
Jan 3 at 7:04













it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer

– user3678149
Jan 3 at 7:08





it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer

– user3678149
Jan 3 at 7:08













@user3678149, it will be great if you can help me with the example.

– Ayush
Jan 3 at 7:10





@user3678149, it will be great if you can help me with the example.

– Ayush
Jan 3 at 7:10












3 Answers
3






active

oldest

votes


















0














you can use <template> a new tag in HTML5.

I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a



document.querySelector();


using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.



https://www.w3schools.com/tags/tag_template.asp






share|improve this answer































    0














    You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.




    1. When you invoke HTMLTableElement#insertRow() you add a new HTMLTableRowElement

    2. Calling HTMLTableRowElement#insertCell adds a new HTMLCellElement

    3. You can set textContent or createTextNode and appendChild to set the content of the cells. The results are the same - both are options.





    // sample data
    var exceptionData = [
    [1, "ERROR"],
    [2, "WARNING"],
    [3, "INFORMATION"],
    [4, "ERROR"],
    [5, "WARNING"],
    [6, "INFORMATION"],
    [7, "OTHER"],
    [8, "OTHER"]
    ];


    //how to put the data in the table
    var table = document.getElementById("data"); //selected an existing table

    fillTable(table, exceptionData);

    function fillTable(table, data) {
    for (var i = 0; i < data.length; i++) {
    var rowData = data[i];

    var tableRow = table.insertRow();

    //setting textContent of the cell
    var idCell = tableRow.insertCell();
    var id = rowData[0];
    idCell.textContent = id;

    //appending a textNode child to the cell
    var typeCell = tableRow.insertCell();
    var type = document.createTextNode(rowData[1]);
    typeCell.appendChild(type)

    }
    }

    table, th, td {
    border: 1px black solid;
    border-collapse: collapse;
    }

    <div id="tableDiv">
    <table id="data">
    <tr><th>Exception ID</th><th>Type</th></tr>
    </table>
    </div>





    This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement and then add it via appendChild. I've added HTMLTableELement#createTHead to showcase it but you don't have to do that. I can't find a way to add <th> elements programmatically from the table API, so I'm using Document#createElement to make them as well - the <thead> is a nice addition but non-essential to how a table would be rendered.






    // sample data
    var tableConfig = ["Exception ID", "Type"];

    var exceptionData = [
    [1, "ERROR"],
    [2, "WARNING"],
    [3, "INFORMATION"],
    [4, "ERROR"],
    [5, "WARNING"],
    [6, "INFORMATION"],
    [7, "OTHER"],
    [8, "OTHER"]
    ];


    //how make the table and put the data in
    var table = createTable(tableConfig);

    fillTable(table, exceptionData);

    document.getElementById("tableDiv").appendChild(table);

    function createTable(config) {
    var table = document.createElement("table");

    var tHead = table.createTHead();
    var headerRow = tHead.insertRow();

    for(var i = 0; i < config.length; i++) {
    var th = document.createElement("th");
    th.textContent = config[i];

    headerRow.appendChild(th);
    }
    return table;
    }

    function fillTable(table, data) {
    for (var i = 0; i < data.length; i++) {
    var rowData = data[i];

    var tableRow = table.insertRow();

    for(var j = 0; j < rowData.length; j++) {
    tableRow.insertCell().textContent = rowData[j]; //create and set the content
    }
    }
    }

    table, th, td {
    border: 1px black solid;
    border-collapse: collapse;
    }

    <div id="tableDiv"></div>





    Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.



    Finally, here is the second example re-written in ES6 mainly to avoid the plain for loops in favour of for...of loops.






    // sample data
    const tableConfig = ["Exception ID", "Type"];

    const exceptionData = [
    [1, "ERROR"],
    [2, "WARNING"],
    [3, "INFORMATION"],
    [4, "ERROR"],
    [5, "WARNING"],
    [6, "INFORMATION"],
    [7, "OTHER"],
    [8, "OTHER"]
    ];


    //how make the table and put the data in
    const table = createTable(tableConfig);

    fillTable(table, exceptionData);

    document.getElementById("tableDiv").appendChild(table);

    function createTable(config) {
    const table = document.createElement("table");

    const tHead = table.createTHead();
    const headerRow = tHead.insertRow();

    for(header of config) {
    const th = document.createElement("th");
    th.textContent = header;

    headerRow.appendChild(th);
    }
    return table;
    }

    function fillTable(table, data) {
    for (rowData of data) {
    const tableRow = table.insertRow();

    for(cellData of rowData) {
    tableRow.insertCell().textContent = cellData; //create and set the content
    }
    }
    }

    table, th, td {
    border: 1px black solid;
    border-collapse: collapse;
    }

    <div id="tableDiv"></div>








    share|improve this answer































      -1














      Ok you have array of objects, you want to show data in table right. Then follow below code.



      In JSP page write empty table with header.



      <table id="tableID">
      <thead>
      <th>Header</th>
      <thead>
      <tbody>
      </tbody>
      </table>


      In JS file write below



      var text = ""
      var i;
      for (i = 0; i < array.length; i++) {
      text += <tr><td>array[ i ]</td></tr>;
      }

      $('#tableID').find('tbody').html(text); // Jquery





      share|improve this answer


























      • Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.

        – Ayush
        Jan 3 at 7:30











      • Then use DataTable concept . It's give lot of futures also .

        – user3678149
        Jan 3 at 7:32











      • for that I have to create a table first.

        – Ayush
        Jan 3 at 7:38











      • the new edit seems to be optimized, let me try that, will update you soon.

        – Ayush
        Jan 3 at 7:50











      • @Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM

        – VLAZ
        Jan 3 at 7:56











      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017634%2fany-alternative-to-create-a-dynamic-table-using-javascript-innerhtml%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      you can use <template> a new tag in HTML5.

      I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a



      document.querySelector();


      using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.



      https://www.w3schools.com/tags/tag_template.asp






      share|improve this answer




























        0














        you can use <template> a new tag in HTML5.

        I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a



        document.querySelector();


        using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.



        https://www.w3schools.com/tags/tag_template.asp






        share|improve this answer


























          0












          0








          0







          you can use <template> a new tag in HTML5.

          I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a



          document.querySelector();


          using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.



          https://www.w3schools.com/tags/tag_template.asp






          share|improve this answer













          you can use <template> a new tag in HTML5.

          I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a



          document.querySelector();


          using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.



          https://www.w3schools.com/tags/tag_template.asp







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Jan 3 at 7:06









          Matthew Montes de OcaMatthew Montes de Oca

          1




          1

























              0














              You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.




              1. When you invoke HTMLTableElement#insertRow() you add a new HTMLTableRowElement

              2. Calling HTMLTableRowElement#insertCell adds a new HTMLCellElement

              3. You can set textContent or createTextNode and appendChild to set the content of the cells. The results are the same - both are options.





              // sample data
              var exceptionData = [
              [1, "ERROR"],
              [2, "WARNING"],
              [3, "INFORMATION"],
              [4, "ERROR"],
              [5, "WARNING"],
              [6, "INFORMATION"],
              [7, "OTHER"],
              [8, "OTHER"]
              ];


              //how to put the data in the table
              var table = document.getElementById("data"); //selected an existing table

              fillTable(table, exceptionData);

              function fillTable(table, data) {
              for (var i = 0; i < data.length; i++) {
              var rowData = data[i];

              var tableRow = table.insertRow();

              //setting textContent of the cell
              var idCell = tableRow.insertCell();
              var id = rowData[0];
              idCell.textContent = id;

              //appending a textNode child to the cell
              var typeCell = tableRow.insertCell();
              var type = document.createTextNode(rowData[1]);
              typeCell.appendChild(type)

              }
              }

              table, th, td {
              border: 1px black solid;
              border-collapse: collapse;
              }

              <div id="tableDiv">
              <table id="data">
              <tr><th>Exception ID</th><th>Type</th></tr>
              </table>
              </div>





              This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement and then add it via appendChild. I've added HTMLTableELement#createTHead to showcase it but you don't have to do that. I can't find a way to add <th> elements programmatically from the table API, so I'm using Document#createElement to make them as well - the <thead> is a nice addition but non-essential to how a table would be rendered.






              // sample data
              var tableConfig = ["Exception ID", "Type"];

              var exceptionData = [
              [1, "ERROR"],
              [2, "WARNING"],
              [3, "INFORMATION"],
              [4, "ERROR"],
              [5, "WARNING"],
              [6, "INFORMATION"],
              [7, "OTHER"],
              [8, "OTHER"]
              ];


              //how make the table and put the data in
              var table = createTable(tableConfig);

              fillTable(table, exceptionData);

              document.getElementById("tableDiv").appendChild(table);

              function createTable(config) {
              var table = document.createElement("table");

              var tHead = table.createTHead();
              var headerRow = tHead.insertRow();

              for(var i = 0; i < config.length; i++) {
              var th = document.createElement("th");
              th.textContent = config[i];

              headerRow.appendChild(th);
              }
              return table;
              }

              function fillTable(table, data) {
              for (var i = 0; i < data.length; i++) {
              var rowData = data[i];

              var tableRow = table.insertRow();

              for(var j = 0; j < rowData.length; j++) {
              tableRow.insertCell().textContent = rowData[j]; //create and set the content
              }
              }
              }

              table, th, td {
              border: 1px black solid;
              border-collapse: collapse;
              }

              <div id="tableDiv"></div>





              Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.



              Finally, here is the second example re-written in ES6 mainly to avoid the plain for loops in favour of for...of loops.






              // sample data
              const tableConfig = ["Exception ID", "Type"];

              const exceptionData = [
              [1, "ERROR"],
              [2, "WARNING"],
              [3, "INFORMATION"],
              [4, "ERROR"],
              [5, "WARNING"],
              [6, "INFORMATION"],
              [7, "OTHER"],
              [8, "OTHER"]
              ];


              //how make the table and put the data in
              const table = createTable(tableConfig);

              fillTable(table, exceptionData);

              document.getElementById("tableDiv").appendChild(table);

              function createTable(config) {
              const table = document.createElement("table");

              const tHead = table.createTHead();
              const headerRow = tHead.insertRow();

              for(header of config) {
              const th = document.createElement("th");
              th.textContent = header;

              headerRow.appendChild(th);
              }
              return table;
              }

              function fillTable(table, data) {
              for (rowData of data) {
              const tableRow = table.insertRow();

              for(cellData of rowData) {
              tableRow.insertCell().textContent = cellData; //create and set the content
              }
              }
              }

              table, th, td {
              border: 1px black solid;
              border-collapse: collapse;
              }

              <div id="tableDiv"></div>








              share|improve this answer




























                0














                You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.




                1. When you invoke HTMLTableElement#insertRow() you add a new HTMLTableRowElement

                2. Calling HTMLTableRowElement#insertCell adds a new HTMLCellElement

                3. You can set textContent or createTextNode and appendChild to set the content of the cells. The results are the same - both are options.





                // sample data
                var exceptionData = [
                [1, "ERROR"],
                [2, "WARNING"],
                [3, "INFORMATION"],
                [4, "ERROR"],
                [5, "WARNING"],
                [6, "INFORMATION"],
                [7, "OTHER"],
                [8, "OTHER"]
                ];


                //how to put the data in the table
                var table = document.getElementById("data"); //selected an existing table

                fillTable(table, exceptionData);

                function fillTable(table, data) {
                for (var i = 0; i < data.length; i++) {
                var rowData = data[i];

                var tableRow = table.insertRow();

                //setting textContent of the cell
                var idCell = tableRow.insertCell();
                var id = rowData[0];
                idCell.textContent = id;

                //appending a textNode child to the cell
                var typeCell = tableRow.insertCell();
                var type = document.createTextNode(rowData[1]);
                typeCell.appendChild(type)

                }
                }

                table, th, td {
                border: 1px black solid;
                border-collapse: collapse;
                }

                <div id="tableDiv">
                <table id="data">
                <tr><th>Exception ID</th><th>Type</th></tr>
                </table>
                </div>





                This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement and then add it via appendChild. I've added HTMLTableELement#createTHead to showcase it but you don't have to do that. I can't find a way to add <th> elements programmatically from the table API, so I'm using Document#createElement to make them as well - the <thead> is a nice addition but non-essential to how a table would be rendered.






                // sample data
                var tableConfig = ["Exception ID", "Type"];

                var exceptionData = [
                [1, "ERROR"],
                [2, "WARNING"],
                [3, "INFORMATION"],
                [4, "ERROR"],
                [5, "WARNING"],
                [6, "INFORMATION"],
                [7, "OTHER"],
                [8, "OTHER"]
                ];


                //how make the table and put the data in
                var table = createTable(tableConfig);

                fillTable(table, exceptionData);

                document.getElementById("tableDiv").appendChild(table);

                function createTable(config) {
                var table = document.createElement("table");

                var tHead = table.createTHead();
                var headerRow = tHead.insertRow();

                for(var i = 0; i < config.length; i++) {
                var th = document.createElement("th");
                th.textContent = config[i];

                headerRow.appendChild(th);
                }
                return table;
                }

                function fillTable(table, data) {
                for (var i = 0; i < data.length; i++) {
                var rowData = data[i];

                var tableRow = table.insertRow();

                for(var j = 0; j < rowData.length; j++) {
                tableRow.insertCell().textContent = rowData[j]; //create and set the content
                }
                }
                }

                table, th, td {
                border: 1px black solid;
                border-collapse: collapse;
                }

                <div id="tableDiv"></div>





                Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.



                Finally, here is the second example re-written in ES6 mainly to avoid the plain for loops in favour of for...of loops.






                // sample data
                const tableConfig = ["Exception ID", "Type"];

                const exceptionData = [
                [1, "ERROR"],
                [2, "WARNING"],
                [3, "INFORMATION"],
                [4, "ERROR"],
                [5, "WARNING"],
                [6, "INFORMATION"],
                [7, "OTHER"],
                [8, "OTHER"]
                ];


                //how make the table and put the data in
                const table = createTable(tableConfig);

                fillTable(table, exceptionData);

                document.getElementById("tableDiv").appendChild(table);

                function createTable(config) {
                const table = document.createElement("table");

                const tHead = table.createTHead();
                const headerRow = tHead.insertRow();

                for(header of config) {
                const th = document.createElement("th");
                th.textContent = header;

                headerRow.appendChild(th);
                }
                return table;
                }

                function fillTable(table, data) {
                for (rowData of data) {
                const tableRow = table.insertRow();

                for(cellData of rowData) {
                tableRow.insertCell().textContent = cellData; //create and set the content
                }
                }
                }

                table, th, td {
                border: 1px black solid;
                border-collapse: collapse;
                }

                <div id="tableDiv"></div>








                share|improve this answer


























                  0












                  0








                  0







                  You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.




                  1. When you invoke HTMLTableElement#insertRow() you add a new HTMLTableRowElement

                  2. Calling HTMLTableRowElement#insertCell adds a new HTMLCellElement

                  3. You can set textContent or createTextNode and appendChild to set the content of the cells. The results are the same - both are options.





                  // sample data
                  var exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how to put the data in the table
                  var table = document.getElementById("data"); //selected an existing table

                  fillTable(table, exceptionData);

                  function fillTable(table, data) {
                  for (var i = 0; i < data.length; i++) {
                  var rowData = data[i];

                  var tableRow = table.insertRow();

                  //setting textContent of the cell
                  var idCell = tableRow.insertCell();
                  var id = rowData[0];
                  idCell.textContent = id;

                  //appending a textNode child to the cell
                  var typeCell = tableRow.insertCell();
                  var type = document.createTextNode(rowData[1]);
                  typeCell.appendChild(type)

                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv">
                  <table id="data">
                  <tr><th>Exception ID</th><th>Type</th></tr>
                  </table>
                  </div>





                  This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement and then add it via appendChild. I've added HTMLTableELement#createTHead to showcase it but you don't have to do that. I can't find a way to add <th> elements programmatically from the table API, so I'm using Document#createElement to make them as well - the <thead> is a nice addition but non-essential to how a table would be rendered.






                  // sample data
                  var tableConfig = ["Exception ID", "Type"];

                  var exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how make the table and put the data in
                  var table = createTable(tableConfig);

                  fillTable(table, exceptionData);

                  document.getElementById("tableDiv").appendChild(table);

                  function createTable(config) {
                  var table = document.createElement("table");

                  var tHead = table.createTHead();
                  var headerRow = tHead.insertRow();

                  for(var i = 0; i < config.length; i++) {
                  var th = document.createElement("th");
                  th.textContent = config[i];

                  headerRow.appendChild(th);
                  }
                  return table;
                  }

                  function fillTable(table, data) {
                  for (var i = 0; i < data.length; i++) {
                  var rowData = data[i];

                  var tableRow = table.insertRow();

                  for(var j = 0; j < rowData.length; j++) {
                  tableRow.insertCell().textContent = rowData[j]; //create and set the content
                  }
                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv"></div>





                  Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.



                  Finally, here is the second example re-written in ES6 mainly to avoid the plain for loops in favour of for...of loops.






                  // sample data
                  const tableConfig = ["Exception ID", "Type"];

                  const exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how make the table and put the data in
                  const table = createTable(tableConfig);

                  fillTable(table, exceptionData);

                  document.getElementById("tableDiv").appendChild(table);

                  function createTable(config) {
                  const table = document.createElement("table");

                  const tHead = table.createTHead();
                  const headerRow = tHead.insertRow();

                  for(header of config) {
                  const th = document.createElement("th");
                  th.textContent = header;

                  headerRow.appendChild(th);
                  }
                  return table;
                  }

                  function fillTable(table, data) {
                  for (rowData of data) {
                  const tableRow = table.insertRow();

                  for(cellData of rowData) {
                  tableRow.insertCell().textContent = cellData; //create and set the content
                  }
                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv"></div>








                  share|improve this answer













                  You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.




                  1. When you invoke HTMLTableElement#insertRow() you add a new HTMLTableRowElement

                  2. Calling HTMLTableRowElement#insertCell adds a new HTMLCellElement

                  3. You can set textContent or createTextNode and appendChild to set the content of the cells. The results are the same - both are options.





                  // sample data
                  var exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how to put the data in the table
                  var table = document.getElementById("data"); //selected an existing table

                  fillTable(table, exceptionData);

                  function fillTable(table, data) {
                  for (var i = 0; i < data.length; i++) {
                  var rowData = data[i];

                  var tableRow = table.insertRow();

                  //setting textContent of the cell
                  var idCell = tableRow.insertCell();
                  var id = rowData[0];
                  idCell.textContent = id;

                  //appending a textNode child to the cell
                  var typeCell = tableRow.insertCell();
                  var type = document.createTextNode(rowData[1]);
                  typeCell.appendChild(type)

                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv">
                  <table id="data">
                  <tr><th>Exception ID</th><th>Type</th></tr>
                  </table>
                  </div>





                  This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement and then add it via appendChild. I've added HTMLTableELement#createTHead to showcase it but you don't have to do that. I can't find a way to add <th> elements programmatically from the table API, so I'm using Document#createElement to make them as well - the <thead> is a nice addition but non-essential to how a table would be rendered.






                  // sample data
                  var tableConfig = ["Exception ID", "Type"];

                  var exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how make the table and put the data in
                  var table = createTable(tableConfig);

                  fillTable(table, exceptionData);

                  document.getElementById("tableDiv").appendChild(table);

                  function createTable(config) {
                  var table = document.createElement("table");

                  var tHead = table.createTHead();
                  var headerRow = tHead.insertRow();

                  for(var i = 0; i < config.length; i++) {
                  var th = document.createElement("th");
                  th.textContent = config[i];

                  headerRow.appendChild(th);
                  }
                  return table;
                  }

                  function fillTable(table, data) {
                  for (var i = 0; i < data.length; i++) {
                  var rowData = data[i];

                  var tableRow = table.insertRow();

                  for(var j = 0; j < rowData.length; j++) {
                  tableRow.insertCell().textContent = rowData[j]; //create and set the content
                  }
                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv"></div>





                  Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.



                  Finally, here is the second example re-written in ES6 mainly to avoid the plain for loops in favour of for...of loops.






                  // sample data
                  const tableConfig = ["Exception ID", "Type"];

                  const exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how make the table and put the data in
                  const table = createTable(tableConfig);

                  fillTable(table, exceptionData);

                  document.getElementById("tableDiv").appendChild(table);

                  function createTable(config) {
                  const table = document.createElement("table");

                  const tHead = table.createTHead();
                  const headerRow = tHead.insertRow();

                  for(header of config) {
                  const th = document.createElement("th");
                  th.textContent = header;

                  headerRow.appendChild(th);
                  }
                  return table;
                  }

                  function fillTable(table, data) {
                  for (rowData of data) {
                  const tableRow = table.insertRow();

                  for(cellData of rowData) {
                  tableRow.insertCell().textContent = cellData; //create and set the content
                  }
                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv"></div>








                  // sample data
                  var exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how to put the data in the table
                  var table = document.getElementById("data"); //selected an existing table

                  fillTable(table, exceptionData);

                  function fillTable(table, data) {
                  for (var i = 0; i < data.length; i++) {
                  var rowData = data[i];

                  var tableRow = table.insertRow();

                  //setting textContent of the cell
                  var idCell = tableRow.insertCell();
                  var id = rowData[0];
                  idCell.textContent = id;

                  //appending a textNode child to the cell
                  var typeCell = tableRow.insertCell();
                  var type = document.createTextNode(rowData[1]);
                  typeCell.appendChild(type)

                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv">
                  <table id="data">
                  <tr><th>Exception ID</th><th>Type</th></tr>
                  </table>
                  </div>





                  // sample data
                  var exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how to put the data in the table
                  var table = document.getElementById("data"); //selected an existing table

                  fillTable(table, exceptionData);

                  function fillTable(table, data) {
                  for (var i = 0; i < data.length; i++) {
                  var rowData = data[i];

                  var tableRow = table.insertRow();

                  //setting textContent of the cell
                  var idCell = tableRow.insertCell();
                  var id = rowData[0];
                  idCell.textContent = id;

                  //appending a textNode child to the cell
                  var typeCell = tableRow.insertCell();
                  var type = document.createTextNode(rowData[1]);
                  typeCell.appendChild(type)

                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv">
                  <table id="data">
                  <tr><th>Exception ID</th><th>Type</th></tr>
                  </table>
                  </div>





                  // sample data
                  var tableConfig = ["Exception ID", "Type"];

                  var exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how make the table and put the data in
                  var table = createTable(tableConfig);

                  fillTable(table, exceptionData);

                  document.getElementById("tableDiv").appendChild(table);

                  function createTable(config) {
                  var table = document.createElement("table");

                  var tHead = table.createTHead();
                  var headerRow = tHead.insertRow();

                  for(var i = 0; i < config.length; i++) {
                  var th = document.createElement("th");
                  th.textContent = config[i];

                  headerRow.appendChild(th);
                  }
                  return table;
                  }

                  function fillTable(table, data) {
                  for (var i = 0; i < data.length; i++) {
                  var rowData = data[i];

                  var tableRow = table.insertRow();

                  for(var j = 0; j < rowData.length; j++) {
                  tableRow.insertCell().textContent = rowData[j]; //create and set the content
                  }
                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv"></div>





                  // sample data
                  var tableConfig = ["Exception ID", "Type"];

                  var exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how make the table and put the data in
                  var table = createTable(tableConfig);

                  fillTable(table, exceptionData);

                  document.getElementById("tableDiv").appendChild(table);

                  function createTable(config) {
                  var table = document.createElement("table");

                  var tHead = table.createTHead();
                  var headerRow = tHead.insertRow();

                  for(var i = 0; i < config.length; i++) {
                  var th = document.createElement("th");
                  th.textContent = config[i];

                  headerRow.appendChild(th);
                  }
                  return table;
                  }

                  function fillTable(table, data) {
                  for (var i = 0; i < data.length; i++) {
                  var rowData = data[i];

                  var tableRow = table.insertRow();

                  for(var j = 0; j < rowData.length; j++) {
                  tableRow.insertCell().textContent = rowData[j]; //create and set the content
                  }
                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv"></div>





                  // sample data
                  const tableConfig = ["Exception ID", "Type"];

                  const exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how make the table and put the data in
                  const table = createTable(tableConfig);

                  fillTable(table, exceptionData);

                  document.getElementById("tableDiv").appendChild(table);

                  function createTable(config) {
                  const table = document.createElement("table");

                  const tHead = table.createTHead();
                  const headerRow = tHead.insertRow();

                  for(header of config) {
                  const th = document.createElement("th");
                  th.textContent = header;

                  headerRow.appendChild(th);
                  }
                  return table;
                  }

                  function fillTable(table, data) {
                  for (rowData of data) {
                  const tableRow = table.insertRow();

                  for(cellData of rowData) {
                  tableRow.insertCell().textContent = cellData; //create and set the content
                  }
                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv"></div>





                  // sample data
                  const tableConfig = ["Exception ID", "Type"];

                  const exceptionData = [
                  [1, "ERROR"],
                  [2, "WARNING"],
                  [3, "INFORMATION"],
                  [4, "ERROR"],
                  [5, "WARNING"],
                  [6, "INFORMATION"],
                  [7, "OTHER"],
                  [8, "OTHER"]
                  ];


                  //how make the table and put the data in
                  const table = createTable(tableConfig);

                  fillTable(table, exceptionData);

                  document.getElementById("tableDiv").appendChild(table);

                  function createTable(config) {
                  const table = document.createElement("table");

                  const tHead = table.createTHead();
                  const headerRow = tHead.insertRow();

                  for(header of config) {
                  const th = document.createElement("th");
                  th.textContent = header;

                  headerRow.appendChild(th);
                  }
                  return table;
                  }

                  function fillTable(table, data) {
                  for (rowData of data) {
                  const tableRow = table.insertRow();

                  for(cellData of rowData) {
                  tableRow.insertCell().textContent = cellData; //create and set the content
                  }
                  }
                  }

                  table, th, td {
                  border: 1px black solid;
                  border-collapse: collapse;
                  }

                  <div id="tableDiv"></div>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Jan 4 at 21:12









                  VLAZVLAZ

                  4,64532235




                  4,64532235























                      -1














                      Ok you have array of objects, you want to show data in table right. Then follow below code.



                      In JSP page write empty table with header.



                      <table id="tableID">
                      <thead>
                      <th>Header</th>
                      <thead>
                      <tbody>
                      </tbody>
                      </table>


                      In JS file write below



                      var text = ""
                      var i;
                      for (i = 0; i < array.length; i++) {
                      text += <tr><td>array[ i ]</td></tr>;
                      }

                      $('#tableID').find('tbody').html(text); // Jquery





                      share|improve this answer


























                      • Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.

                        – Ayush
                        Jan 3 at 7:30











                      • Then use DataTable concept . It's give lot of futures also .

                        – user3678149
                        Jan 3 at 7:32











                      • for that I have to create a table first.

                        – Ayush
                        Jan 3 at 7:38











                      • the new edit seems to be optimized, let me try that, will update you soon.

                        – Ayush
                        Jan 3 at 7:50











                      • @Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM

                        – VLAZ
                        Jan 3 at 7:56
















                      -1














                      Ok you have array of objects, you want to show data in table right. Then follow below code.



                      In JSP page write empty table with header.



                      <table id="tableID">
                      <thead>
                      <th>Header</th>
                      <thead>
                      <tbody>
                      </tbody>
                      </table>


                      In JS file write below



                      var text = ""
                      var i;
                      for (i = 0; i < array.length; i++) {
                      text += <tr><td>array[ i ]</td></tr>;
                      }

                      $('#tableID').find('tbody').html(text); // Jquery





                      share|improve this answer


























                      • Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.

                        – Ayush
                        Jan 3 at 7:30











                      • Then use DataTable concept . It's give lot of futures also .

                        – user3678149
                        Jan 3 at 7:32











                      • for that I have to create a table first.

                        – Ayush
                        Jan 3 at 7:38











                      • the new edit seems to be optimized, let me try that, will update you soon.

                        – Ayush
                        Jan 3 at 7:50











                      • @Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM

                        – VLAZ
                        Jan 3 at 7:56














                      -1












                      -1








                      -1







                      Ok you have array of objects, you want to show data in table right. Then follow below code.



                      In JSP page write empty table with header.



                      <table id="tableID">
                      <thead>
                      <th>Header</th>
                      <thead>
                      <tbody>
                      </tbody>
                      </table>


                      In JS file write below



                      var text = ""
                      var i;
                      for (i = 0; i < array.length; i++) {
                      text += <tr><td>array[ i ]</td></tr>;
                      }

                      $('#tableID').find('tbody').html(text); // Jquery





                      share|improve this answer















                      Ok you have array of objects, you want to show data in table right. Then follow below code.



                      In JSP page write empty table with header.



                      <table id="tableID">
                      <thead>
                      <th>Header</th>
                      <thead>
                      <tbody>
                      </tbody>
                      </table>


                      In JS file write below



                      var text = ""
                      var i;
                      for (i = 0; i < array.length; i++) {
                      text += <tr><td>array[ i ]</td></tr>;
                      }

                      $('#tableID').find('tbody').html(text); // Jquery






                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Jan 3 at 7:46

























                      answered Jan 3 at 7:17









                      user3678149user3678149

                      1777




                      1777













                      • Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.

                        – Ayush
                        Jan 3 at 7:30











                      • Then use DataTable concept . It's give lot of futures also .

                        – user3678149
                        Jan 3 at 7:32











                      • for that I have to create a table first.

                        – Ayush
                        Jan 3 at 7:38











                      • the new edit seems to be optimized, let me try that, will update you soon.

                        – Ayush
                        Jan 3 at 7:50











                      • @Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM

                        – VLAZ
                        Jan 3 at 7:56



















                      • Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.

                        – Ayush
                        Jan 3 at 7:30











                      • Then use DataTable concept . It's give lot of futures also .

                        – user3678149
                        Jan 3 at 7:32











                      • for that I have to create a table first.

                        – Ayush
                        Jan 3 at 7:38











                      • the new edit seems to be optimized, let me try that, will update you soon.

                        – Ayush
                        Jan 3 at 7:50











                      • @Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM

                        – VLAZ
                        Jan 3 at 7:56

















                      Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.

                      – Ayush
                      Jan 3 at 7:30





                      Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.

                      – Ayush
                      Jan 3 at 7:30













                      Then use DataTable concept . It's give lot of futures also .

                      – user3678149
                      Jan 3 at 7:32





                      Then use DataTable concept . It's give lot of futures also .

                      – user3678149
                      Jan 3 at 7:32













                      for that I have to create a table first.

                      – Ayush
                      Jan 3 at 7:38





                      for that I have to create a table first.

                      – Ayush
                      Jan 3 at 7:38













                      the new edit seems to be optimized, let me try that, will update you soon.

                      – Ayush
                      Jan 3 at 7:50





                      the new edit seems to be optimized, let me try that, will update you soon.

                      – Ayush
                      Jan 3 at 7:50













                      @Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM

                      – VLAZ
                      Jan 3 at 7:56





                      @Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM

                      – VLAZ
                      Jan 3 at 7:56


















                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017634%2fany-alternative-to-create-a-dynamic-table-using-javascript-innerhtml%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Monofisismo

                      Angular Downloading a file using contenturl with Basic Authentication

                      Olmecas