How to insert dynamic string into HTML [duplicate]

Question

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.

You create an HTML string, but you don't do anything with it — CertainPerformance
– CertainPerformance, Commented Feb 16, 2021 at 20:10
Change return result; to document.body.appendChild(result); so that the table will be added to the bottom of the page. — Scott Marcus
– Scott Marcus, Commented Feb 16, 2021 at 20:11
Also if you want to put quotes inside of other quotes, you can just use single quotes inside of the doubles instead of escaping the quotes with \", for example: "<tbody id='myTable'>" — Scott Marcus
– Scott Marcus, Commented Feb 16, 2021 at 20:14
Thank you all for your help. Also, thank you, Scott Marcus, for your understanding. I can see that I could have been more clear with my question but as for the research effort, I have tried several things and making my question here was kind of a last restort. Not everybody is born an expert. — Carlos Garcia
– Carlos Garcia, Commented Feb 16, 2021 at 20:35

DCR · Accepted Answer · 2021-02-16 20:18:47Z

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>

Collectives™ on Stack Overflow

How to insert dynamic string into HTML [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related