TAG
CSS
JavaScript
Result
Run
License
<h1>createDocumentFragment() method</h1> <div class="fields"> <button type="button" id="btn-makelist">Make List</button> <label> 줄바꿈으로 구분된 항목을 원하는 대로 추가하세요.<br /> <textarea id="source" rows="10">apple
banana</textarea> </label> </div> <ul id="list"></ul>
.fields { display: inline-flex; flex-direction: column; gap: 10px 0; }
window.addEventListener("load", () => { const elTextarea = document.getElementById("source"); const elBtn = document.getElementById("btn-makelist"); elBtn.addEventListener("click", makeList); function makeList() { const elList = document.getElementById("list"); const docFragment = document.createDocumentFragment(); let list = elTextarea.value; let aList = list.split(/\n/); aList.forEach(item => { if(item) { let elAddLi = document.createElement("li"); elAddLi.textContent = item; docFragment.append(elAddLi); } }); elList.append(docFragment); } });
Console
expand_less
License
License
by DevDic
Close