JavaScript, how to add css attribute to a newly created element?

Question

I am trying to add my element to the unordered list. But during the creation of the element I also want to link this to an external css file which has the css property. I have referred following Stack Overflow solutions : Add CSS attributes to element with JavaScript.

let a = document.getElementsByTagName('ul')[0];

let myelement = document.createElement('li');

// tried this first 
myelement.style.border = '2px solid red';

myelement.style.backgroundColor = 'rgb(255, 125, 115)';

let mytext = document.createTextNode('Green Onions');


// second method I tried to link with the external CSS file which I actually want

myelement.setAttribute("class","myclass")


// third method I tried to link with the external CSS file which I actually want

let myattrib = document.createAttribute('class');
myattrib.value = "myclass"
myelement.setAttributeNode(myattrib)


a.appendChild(mytext)

.myclass {
    color: brown;
    text-emphasis-color:blue;
}

<html>
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 id="header">Last King</h1>
    <h2>Buy Groceries</h2>
    <ul>
        <li id="one" class="hot"><em>fresh</em>figs</li>
        <li id="two" class="hot">pine nuts</li>
        <li id="three" class="hot">honey</li>
        <li id="four">balsamic sugar</li>

    </ul>
    <script src="index.js">

    </script>
</body>
</html>

None of these methods works in adding a new element with a CSS property, although with the first method I am able to just add the text node Green Onions. I am learning JS for the first time. Can someone provide me with information on what I am doing wrong?

Does this answer your question? Add CSS attributes to element with JavaScript — mo3n
– mo3n, Commented May 28, 2022 at 7:08
@mo3n It does not, as I tried the setAttribute method. Check my code, In the comments I have tried this method it did not work. — Danish Xavier
– Danish Xavier, Commented May 28, 2022 at 7:13

Youssouf Oumar · Accepted Answer · 2022-05-29 06:54:01Z

2

You are not seeing anything happening because, that li you are creating, is not being added in the DOM. Other than that all your attempts work. I kept in the code below the simplest one.

let ul = document.querySelector("ul"); // line I changed

let myelement = document.createElement("li");
let mytext = document.createTextNode("Green Onions");
myelement.appendChild(mytext); // line I added
myelement.setAttribute("class", "myclass");

ul.appendChild(myelement); // line I added

.myclass {
  color: brown;
  text-emphasis-color: blue;
}

<h1 id="header">Last King</h1>
<h2>Buy Groceries</h2>
<ul>
  <li id="one" class="hot"><em>fresh</em>figs</li>
  <li id="two" class="hot">pine nuts</li>
  <li id="three" class="hot">honey</li>
  <li id="four">balsamic sugar</li>
</ul>

edited May 29, 2022 at 6:54

answered May 28, 2022 at 7:02

Youssouf Oumar

47.4k16 gold badges109 silver badges108 bronze badges

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

2 Comments

Danish Xavier Over a year ago

Oh thank you, I understood the mistake I made. One question why did you use the document.querySelector instead of the method document.getElementsByTagName('ul')[0] . I tried with the later and it still worked. Any advantage of using one over the other.

Youssouf Oumar Over a year ago

Glad I could be useful. The two approaches are correct. I juste used querySelector because it works like CSS selectors, seem simpler to read for me.

Dieter Raber · Accepted Answer · 2022-05-28 07:05:28Z

1

There are two properties you could use, classList and className. As I understand it, you want to achieve this:

<li style="border:...;background-color:..." class="myclass">

You already created your element and added the styles but now you don't know how to add the css class myclass, right?

let myelement = document.createElement('li');

// method a
myelement.className = 'myclass';

// method b
myelement.classList.add('myclass');

I would always go for classList. With all its methods I find it much more elegant than className.

answered May 28, 2022 at 7:05

Dieter Raber

1981 silver badge7 bronze badges

1 Comment

Danish Xavier Over a year ago

This method also works. I was not properly adding back to the DOM. That is why the CSS properties were not rendered. Thank You!!.

Collectives™ on Stack Overflow

JavaScript, how to add css attribute to a newly created element?

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related