How to apply style sheets to dynamically created elements?

Kai Published at Dev

Kai

this should be an easy one: I have the following code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        var table = document.createElement("table");
        table.setAttribute("id","table");
        var headRow = document.createElement("tr");
        var dataRow = document.createElement("tr");
        var head = document.createElement("th");
        var data = document.createElement("td");
        head.innerHTML="head";
        data.innerHTML="data";
        headRow.appendChild(head);
        dataRow.appendChild(data);
        table.appendChild(headRow);
        table.appendChild(dataRow);
        console.log(document.styleSheets);
        table.className = "table";
        document.getElementById("test").appendChild(table);
    });
  </script>
</head>
<body>
<div id="test"></div>
</body>
</html>

The problem is: The style specified in the bootstrap.min for the class "table" is never applied upon loading the side. Do I have to do something additionally? I test it in the most recent version of Safari.

Any Help?

Cheers Twerp

Praveen Kumar Purushothaman

It is not dynamically created issue. It is because you haven't set the class to table. As Bootstrap Docs says:

You have to use <thead> and <tbody> for the class to work.

To add in your answer:

var thead = document.createElement("thead");
thead.appendChild(headRow);
var tbody = document.createElement("tbody");
tbody.appendChild(dataRow);

Add this for a quick fix:

$("tr:first-child").wrap("<thead/>");

Your final code should look like:

    var table = document.createElement("table");
    table.setAttribute("id","table");
    var headRow = document.createElement("tr");
    var dataRow = document.createElement("tr");
    var head = document.createElement("th");
    var data = document.createElement("td");
    var thead = document.createElement("thead");
    thead.appendChild(headRow);
    var tbody = document.createElement("tbody");
    tbody.appendChild(dataRow);
    head.innerHTML="head";
    data.innerHTML="data";
    headRow.appendChild(head);
    dataRow.appendChild(data);
    table.appendChild(thead);
    table.appendChild(tbody);
    console.log(document.styleSheets);
    table.className = "table";
    document.getElementById("test").appendChild(table);

Collected from the Internet

Please contact [email protected] to delete if infringement.