TAG
JavaScript
Result
Run
License
<button type="button" id="btn-add-sametagname-element">Add element with the same tag name</button> <p>No <span>pain</span> No <span>gain</span></p>
window.addEventListener("load", () => { const elBtnAdd = document.getElementById("btn-add-sametagname-element"); // 대상을 맨 처음 한번만 컬렉션함(HTMLCollection으로 Live 상태가 됨). const lkaElSameTagNameElement = document.getElementsByTagName("span"); initSpanElements(); elBtnAdd.addEventListener("click", e => { let elAddP = document.createElement("p"); let elAddSpan = document.createElement("span"); elAddSpan.textContent = "bitter"; elAddP.append("A good medicine tastes ", elAddSpan); document.body.append(elAddP); // 자동으로 lkaElSameTagNameElement에 반영됨. // 다시 동일한 태그명을 사용하여 대상을 찾을 필요 없음. initSpanElements(); }); function initSpanElements() { Array.from(lkaElSameTagNameElement, el => el.style.backgroundColor = "yellow"); } });
Console
expand_less
License
License
by DevDic
Close