Dynamic HTML page not using css

Question

I'm trying to dynamically set the content of a popup.

Here is a first HTML page where everything is defined statically :

<html>
    <head>
        <meta charset='utf-8'>
        <link href='css/font-awesome.css' rel='stylesheet'>
        <link href='css/myStyle.css' rel='stylesheet'>
    </head>

    <body>
        <div id="data">
            <ul class='links-list'>
                <li><a target='_blank' href='siteURL'><i class='myButton'>TEXT</i></a></li>
                <li><a target='_blank' href='twitterURL'><i class='myButton'>TEXT</i></a></li>
            </ul>
        </div>
    </body>
</html>

Now I need to dynamically set my buttons, so I've removed everything which will be dynamically created :

<html>
    <head>
        <meta charset='utf-8'>
        <link href='css/font-awesome.css' rel='stylesheet'>
        <link href='css/myStyle.css' rel='stylesheet'>
    </head>

    <body>
        <div id="data">
        </div>

        <script type="text/javascript" src="script.js">
        </script>
    </body>
</html>

My content script "script.js" receive data (array of links) and have to create buttons in my HTML document :

self.port.on("liste", function(list)
{
    var div = document.getElementById('data'); // Get <div id="data">
    var ul = document.createElement('ul'); // Create <ul class='links-list'>
    ul.class = 'links-list';

    for (var i = 0; i < list.links.length; ++i)
    {
        var site = list.links[i];
        var li = document.createElement('li'); // Create <li>
        var link = document.createElement('a'); // Create <a>
        var button = document.createElement('i'); // Create <i>

        button.class = "myButton";

        link.text = site.text;
        link.href = site.url;
        link.target = '_blank';

        link.appendChild(button);
        li.appendChild(link);
        ul.appendChild(li);
    }

    div.appendChild(ul);
});

Issue is links created dynamically aren't using "myStyle.css", here is a comparaison :

Static vs dynamic load :

Could anyone help me resolving this? Thank you.

Did you CSS File work in a non-dynamic Page? Can you post it? — Smartis has left SO again
– Smartis has left SO again, Commented Mar 8, 2016 at 16:52
The popup is for a mozilla add-on. I was dynamically loading the content by changing the attribute "innerHTML" and my css file worked well, but mozilla didn't love it and asked me to not use "innerHTML". I'm just changing the way I dynamically change content. moreover, at the end of the question, you have an exemple of how it work on non-dynamic page. — Nucktrooper
– Nucktrooper, Commented Mar 8, 2016 at 16:54
Debugger tells me Uncaught ReferenceError: list is not defined at Script.js Line 5 — Smartis has left SO again
– Smartis has left SO again, Commented Mar 8, 2016 at 16:58
Yes I didn't paste the whole code. The javascript is in this function : self.port.on("liste", function(list) { // ... }); This is how i receive links. — Nucktrooper
– Nucktrooper, Commented Mar 8, 2016 at 16:59
link.text = 'text'; – you are putting the text content directly into the link, whereas in your original HTML code it was inside the i element. — C3roe
– C3roe, Commented Mar 8, 2016 at 17:00

somethinghere · Accepted Answer · 2016-03-08 17:11:40Z

1

The correct way to give an item a class using javascript is - unintuitively enough - className, or setAttribute. So either of these will add the correct class:

button.className = 'myButton'
button.setAttribute('class', 'myButton')

Using just .class does not work in Javascript:

document.getElementById('a1').class = 'aClass';
document.getElementById('a2').className = 'aClass';
document.getElementById('a3').setAttribute('class', 'aClass');

.aClass { color: red; }

<pre id="a1">.class</pre>
<pre id="a2">.className</pre>
<pre id="a3">.setAttribute</pre>

answered Mar 8, 2016 at 17:11

somethinghere

17.5k2 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

OffTheBricks · Accepted Answer · 2016-03-08 18:12:44Z

0

Looks to me like the comment from CBroe is the answer. In your javascript you're putting the text into the link instead of your button. That means that the button will essentially be invisible. That's why it looks different from your hard-coded example. Try this javascript instead.

var div = document.getElementById('data'); // Get <div id="data">
var ul = document.createElement('ul'); // Create <ul class='links-list'>
ul.className = 'links-list';

for (var i = 0; i < 4; ++i){
    var url = i;
    var li = document.createElement('li'); // Create <li>
    var link = document.createElement('a'); // Create <a>
    var button = document.createElement('i'); // Create <i>

    button.className = "myButton";
    button.innerHTML = 'text'+i;

    link.text = "ab ";
    link.href = url;
    link.target = '_blank';

    link.appendChild(button);
    li.appendChild(link);
    ul.appendChild(li);
}

div.appendChild(ul);

edited Mar 8, 2016 at 18:12

answered Mar 8, 2016 at 17:14

OffTheBricks

4744 silver badges10 bronze badges

2 Comments

Asons Over a year ago

There is no such property as .class, it is .className

Nucktrooper Over a year ago

Right answer is from LGSon and somethinghere. As I said text was only here to see why I had no content in my popup. Once i've put these texts, I had text but no button. In final version there is no text but button (size and style defined in my css).

Collectives™ on Stack Overflow

Dynamic HTML page not using css

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related