TAG
JavaScript
Result
Run
License
<button type="button" id="btn-make" value="Apple,Banana,Carrot">Make</button> <ul id="list"></ul>
document.addEventListener("DOMContentLoaded", () => { const ElBtnMake = document.getElementById("btn-make"); const ElList = document.getElementById("list"); ElBtnMake.addEventListener("click", e => { const DocFragment = new DocumentFragment(); let aFruits = e.currentTarget.value.split(","); aFruits.forEach(fruit => { let elAddLi = document.createElement("li"); elAddLi.textContent = fruit; DocFragment.prepend(elAddLi); }); console.log(`Before: ${DocFragment.childElementCount}`); // 인수를 생략하면 하위 요소가 모두 제거된다. DocFragment.replaceChildren(); console.log(`After: ${DocFragment.childElementCount}`); ElList.append(DocFragment); }); });
Console
expand_less
License
License
by DevDic
Close