Todavía soy relativamente nuevo en JS. Sé que probablemente no debería escribir mi código de la forma en que lo he hecho aquí en el mundo real, pero solo estoy haciendo esto para probar mi conocimiento sobre los bucles y extraer datos JSON.
Mi pregunta es, con la forma en que he estructurado mi código, ¿puedo agregar nombres de clase/ID a los elementos que he creado usando doc.createElement? por ejemplo, si quisiera agregar iconos o botones personalizados a cada elemento? Parece que no puedo pensar en una forma de agregarlos que no sea tener que escribir todo el HTML y hacerlo de esa manera. Aquí está mi código:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styles.css"> <title>Document</title> </head> <body> <section> </section> <script src="./app.js"></script> </body> </html>JS
const allCustomers = document.querySelector("section"); let custName = ""; let username = ""; let email = ""; let id = ""; const requestURL = "https://jsonplaceholder.typicode.com/users"; fetch(requestURL) .then((response) => response.text()) .then((text) => DisplayUserInfo(text)); function DisplayUserInfo(userData) { const userArray = JSON.parse(userData); for (i = 0; i < userArray.length; i++) { let listContainer = document.createElement("div"); let myList = document.createElement("p"); let myListItems = document.createElement("span"); myList.textContent = `Customer : ${userArray[i].name}`; myListItems.innerHTML =`<br>ID: ${userArray[i].id} <br>Email: ${userArray[i].email} <br>Username: ${userArray[i].username}`; myListItems.appendChild(myList); listContainer.appendChild(myListItems); allCustomers.appendChild(listContainer); } } DisplayUserInfo();Cualquier sugerencia sería muy apreciada, así como cualquier comentario constructivo. Gracias
Sí, seguro que puede agregar cualquier atributo para un elemento creado. element.classList.add('class-name-here') para agregar clase, element.id = 'id-name-here' para agregar id.
const allCustomers = document.querySelector("section"); let custName = ""; let username = ""; let email = ""; let id = ""; const requestURL = "https://jsonplaceholder.typicode.com/users"; fetch(requestURL) .then((response) => response.text()) .then((text) => DisplayUserInfo(text)); function DisplayUserInfo(userData) { const userArray = JSON.parse(userData); for (i = 0; i < userArray.length; i++) { let listContainer = document.createElement("div"); let myList = document.createElement("p"); myList.classList.add('active'); myList.id = 'paragraph' let myListItems = document.createElement("span"); myList.textContent = `Customer : ${userArray[i].name}`; myListItems.innerHTML =`<br>ID: ${userArray[i].id} <br>Email: ${userArray[i].email} <br>Username: ${userArray[i].username}`; myListItems.appendChild(myList); listContainer.appendChild(myListItems); allCustomers.appendChild(listContainer); } } DisplayUserInfo(); .active { color: red; } #paragraph { font-size: 24px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styles.css"> <title>Document</title> </head> <body> <section> </section> <script src="./app.js"></script> </body> </html>¿Es posible para mí agregar nombres de clase/identificadores a los elementos que he creado usando doc.createElement?
Sí , es posible con classList para agregar class y setAttribute para agregar id
let listContainer = document.createElement("div"); // To add class listContainer.className = 'your-class'; //if you have just one listContainer.classList.add("my-class");//if you want to add multiple // To add id listContainer.setAttribute("id", "your_id");Cuando usa document.createElement , devuelve un Element . Puede utilizar atributos y métodos de Element para llegar a lo que necesita. Hay algunos documentos para esta clase en MDN .
Esto significa que puedes:
> myDiv = document.createElement("div") <div></div> > myDiv.id = "test" 'test' > myDiv <div id="test"></div> Para las clases, puede usar los atributos className o classList .