TAG
JavaScript
Result
Run
License
<button type="button" id="btn-add-samename-element">Add element with the same name</button> <fieldset id="hobbies-fields"> <legend>Hobbies</legend> <label> <input type="checkbox" name="hobby" value="watching movies"/> Watching movies </label> <label> <input type="checkbox" name="hobby" value="cooking"/> Cooking </label> </fieldset>
window.addEventListener("load", () => { const elBtnAdd = document.getElementById("btn-add-samename-element"); const elFields = document.getElementById("hobbies-fields"); // 대상을 맨 처음 한번만 컬렉션함(NodeList가 Live 상태가 됨). const lkaElSameNameElement = document.getElementsByName("hobby"); initHobbiesFields(); elBtnAdd.addEventListener("click", e => { let elAddLabel = document.createElement("label"); let elAddInput = document.createElement("input"); elAddInput.setAttribute("type", "checkbox"); elAddInput.setAttribute("name", "hobby"); elAddInput.setAttribute("value", "travel"); elAddLabel.append(elAddInput, "Travel"); elFields.append(elAddLabel); // 자동으로 lkaElSameNameElement NodeList에 반영됨. // 다시 동일한 name을 사용하여 대상을 찾을 필요 없음. initHobbiesFields(); }); function initHobbiesFields() { Array.from(lkaElSameNameElement, el => el.parentElement.style.backgroundColor = "yellow"); } });
Console
expand_less
License
License
by DevDic
Close