Estoy tratando de agregar mi elemento a la lista desordenada. Pero durante la creación del elemento, también quiero vincularlo a un archivo css externo que tenga la propiedad css. Me he referido a las siguientes soluciones de desbordamiento de pila: agregue atributos CSS al elemento con 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> Ninguno de estos métodos funciona al agregar un nuevo elemento con una propiedad CSS, aunque con el primer método solo puedo agregar el nodo de texto Green Onions . Estoy aprendiendo JS por primera vez. ¿Alguien puede darme información sobre lo que estoy haciendo mal?
No está viendo que suceda nada porque, ese li que está creando, no se está agregando en el DOM. Aparte de eso, todos tus intentos funcionan. Mantuve el código debajo del más simple.
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>Hay dos propiedades que podría usar, classList y className . Según tengo entendido, quieres lograr esto:
<li style="border:...;background-color:..." class="myclass"> Ya creaste tu elemento y agregaste los estilos, pero ahora no sabes cómo agregar la clase css myclass , ¿verdad?
let myelement = document.createElement('li'); // method a myelement.className = 'myclass'; // method b myelement.classList.add('myclass'); Siempre iría por classList . Con todos sus métodos lo encuentro mucho más elegante que className .