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?
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>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.