javascript - 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

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>

Any Help?

Cheers Twerp

Share Improve this question edited Aug 19, 2015 at 20:15 Siguza 23.9k6 gold badges55 silver badges98 bronze badges asked Aug 18, 2015 at 9:55 Kai 3761 gold badge4 silver badges17 bronze badges

3 You don't have to do anything. Newly created elements will inherit the styles defined in your stylesheet. It's probably something else that causes the styles not to be applied. – blex Commented Aug 18, 2015 at 9:59
Have you tried right clicking and inspecting the element with your browser? Could show you some handy information about what's happening with the style. – Ridai Commented Aug 18, 2015 at 9:59
jsfiddle/arunpjohny/vjbgdtjd/2 – Arun P Johny Commented Aug 18, 2015 at 10:03

Add a ment |

4 Answers 4

Sorted by: Reset to default 5

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

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

    $(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);
    })

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

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

You can use element.style.cssProperty

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to apply style sheets to dynamically created elements? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)