TAG
JavaScript
Result
Run
License
<button type="button" id="btn-add-sameclass-element">Add element with the same class</button> <ul id="list"> <li class="favorite">Bus</li> <li>Train</li> <li class="favorite">Airplane</li> </ul>
window.addEventListener("load", () => { const elBtnAdd = document.getElementById("btn-add-sameclass-element"); const elList = document.getElementById("list"); // 대상을 맨 처음 한번만 컬렉션함(Live 상태가 됨). const lkaElSameClassElement = document.getElementsByClassName("favorite"); showFavorite(); elBtnAdd.addEventListener("click", e => { let elAddLi = document.createElement("li"); elAddLi.setAttribute("class", "favorite"); elAddLi.textContent = "foo"; elList.append(elAddLi); // 자동으로 lkaElSameClassElement 컬렉션에 반영됨. // 다시 동일한 class를 사용하여 대상을 찾을 필요 없음. showFavorite(); }); function showFavorite() { Array.from(lkaElSameClassElement, el => el.style.backgroundColor = "yellow"); } });
Console
expand_less
License
License
by DevDic
Close