How to insert dynamic string into HTML

by

I am trying to make a JS function that takes a JS array and uses the content to make an HTML table but when I try to use the code, the table doesn’t show on my Website. This is the function that I am using and I tried calling the function using a button:

<input type = "button" onclick = "makeTableHTML()" value = "Display">

<script> 
    function makeTableHTML() {
        var result = "<table class=\"table table-bordered table-striped\">";
        result += "<thead>";
        result += "<tr>";
        result += "<th>RIF</th>";
        result += "<th>Nombre</th>";
        result += "</tr>";
        result += "</thead>";
        result += "<tbody id=\"myTable\">";                    
        for(var i=0; i<arreglo_rif.length; i++) {
            result += "<tr>";
            result += "<td>"+arreglo_rif[i]+"</td>";
            result += "<td>"+arreglo_nombre[i]+"</td>";                                
            result += "</tr>";
        }
        result += "</tbody>";
        result += "</table>";
        console.log(result);
        return result;
    }
</script>

but when I click on the button the table doesn’t show either.

11 thoughts on “How to insert dynamic string into HTML”

  1. var arreglo_rif=['one','two','three']
var arreglo_nombre=[1,2,3]

function makeTableHTML() {
    var result = "<table class=\"table table-bordered table-striped\">";
    result += "<thead>";
    result += "<tr>";
    result += "<th>RIF</th>";
    result += "<th>Nombre</th>";
    result += "</tr>";
    result += "</thead>";
    result += "<tbody id=\"myTable\">";                    
    for(var i=0; i<arreglo_rif.length; i++) {
        result += "<tr>";
        result += "<td>"+arreglo_rif[i]+"</td>";
        result += "<td>"+arreglo_nombre[i]+"</td>";                                
        result += "</tr>";
    }
    result += "</tbody>";
    result += "</table>";
    
    document.getElementById('container').innerHTML = result;
    
}
    <input type = "button" onclick = "makeTableHTML()" value = "Display">

<div id='container'></div>
    Reply

Leave a Comment