InnerHTML로 추가한 button을 onclick 안쓰고 이벤트 리스너 감지로 함수 실행하기
보통의 경우 innerHTML을 사용하면서<button>삭제</button> 이런식으로 함수버튼까지 생성하면서 사용해도 되지만, innerHTML은 보안이슈가 있기 때문에 파싱할 텍스트가 아니라면 되도록 사용하지 않는것이 좋다.
물론 아예 쓰지 말라는 얘기는 아니다. 적절한 상황에 맞춰서 써야한다는 이야기.
MDN Docs참고 문서
결론은 아래 코드에서
makeTodo 함수는 첫번째의 방법 (하지만 비추)
addTodo 함수에서 처럼 createElement하여 이벤트 감지 걸어놓는 방법이 있습니다.
추가적으로 아래 코드에 작성하진 않았지만 append를 사용하는 방법도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="list">
<button onclick="makeTodo()">클릭하세요</button>
<div id="Test"></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
let listIndex = 0;
function addTodo() {
let todo = document.createElement("div");
todo.id = "todo" + listIndex;
todo.className = "todo";
let input = document.getElementById("input");
todo.innerHTML = "" + input.value +
"<button id=delete" + listIndex + ">삭제</button><br/>";
document.getElementById("Test").appendChild(todo);
todo.addEventListener('click', () => {
deleteTodo(todo);
});
listIndex++;
}
function deleteTodo(tag) {
document.getElementById("Test").removeChild(document.getElementById(tag.getAttribute("id")));
}
function makeTodo() {
document.getElementById("Test").innerHTML = "<div id=delete" + listIndex + "> " +
"<p style='color:red;'>Test</p> <input type='text' id='input'> <button onclick='addTodo()'>추가</button>" +
"</div>";
}
</script>
</html>
Full-stack Engineer. email - corner3499@kakao.com,