2021 프론트 엔드 로드맵 따라가기/JS
Creating Elements
알 수 없는 사용자
2021. 5. 31. 12:34
// Create element
const li = document.createElement("li");
// Add class
li.className = "collection-item";
// Add id
li.id = "new-item";
// Add attribute
li.setAttribute("title", "New Item");
// Create text node and append
li.appendChild(document.createTextNode("Hello World"));
// Create new link element
const link = document.createElement("a");
// Add classes
link.className = "delete-item secondary-content";
// Add HTML Icon
link.innerHTML = `<i class="fa fa-remove"></i>`;
// Append link into li
li.appendChild(link);
// Append li as child to ul
document.querySelector("ul.collection").appendChild(li);
console.log(li);