CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Kai
Kai

Reputation: 376

How to apply style sheets to dynamically created elements?

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

Upvotes: 2

Views: 3265

Answers (4)

Yeezh
Yeezh

Reputation: 161

    $(function () {
        var table = $('<table></table>').attr('id', 'table').addClass('table')
        var head = $('<th></th>').html('head')
        var data = $('<th></th>').html('data')
        var headRow = $('<tr></tr>').append(head)
        var dataRow = $('<tr></tr>').append(data)
        table.append(headRow)
        table.append(dataRow)
        console.log(document.styleSheets);
        $('#test').append(table);
    })

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

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);

Upvotes: 5

CodingIntrigue
CodingIntrigue

Reputation: 78525

The slight difference in styling is because Bootstrap relies on the <tbody> and <thead> elements to apply styling. If you're dynamically creating elements, you need to create these too:

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

Then, instead of appending headRow and dataRow directly, append the newly created elements:

table.appendChild(thead);
table.appendChild(tbody);

Example Fiddle

Upvotes: 3

Dhruv
Dhruv

Reputation: 173

Best way to add style sheet to dynamically added content is to use classList

Please refer below link: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

OR

You can use element.style.cssProperty

Upvotes: 0

Related Questions