웹을 만들다 보니 js를 이용해 동적으로 html 객체를 만들어야 할 경우가 생겼다.
방법을 검색하니
1.createElement()
2.Object.assign()
3.Template literate
이렇게 세가지 방법이 있었는데 1번 방법과 2번 방법은 비슷한 개념이고 3번은 body 전체를 덮어쓰는 페널티가 있어 1번을 사용하였다.
기본적인 createElement()의 틀은 이렇다
const element = document.createElement('객체');
document.body.appendChild(element);객체 부분에 만들고 싶은 button, div, table, p 같은거 넣으면 된다.
body에 appendChild 함수로 넣어버리면 DOM에 element가 구현된다고 하는데 자세히는 모르겠다.
그럼 아래 객체를 createElement로 구현해보자
<input type = 'text' class = 'text' id = 'text' value = 'text'></input>var input = document.createElement("input");
input.type = "text";
input.className = "text";
input.id = "text";
input.value = "text";대충 감을 잡았으면 버튼을 눌렀을때 div와 하위 객체들이 출력되는 코드를 만들어보자
<html>
<head>
<title>
</title>
<link rel = "stylesheet" href = "C:\Users\USER\Desktop\voca_php\css\voca_file_edit.css">
</head>
<script>
row_length = 0;
function create(){
row_length++;
var div_main = document.createElement("div");
div_main.id = "word"+row_length;
div_main.className = "word";
div_main.style.top = (row_length*10) + '%';
div_main.style.left = '35%';
var div1 = document.createElement("div");
div1.id = "word_boundary1";
var div2 = document.createElement("div");
div2.id = "word_boundary2";
var div3 = document.createElement("div");
div3.id = "word_boundary3";
var div4 = document.createElement("div");
div4.id = "word_boundary4";
var p = document.createElement("p");
p.id = 'number';
p.textContent = ''+ row_length;
var input_q = document.createElement("input");
input_q.type = "text";
input_q.className = "english_e";
input_q.id = "english_e"+row_length;
input_q.value = "단어 입력";
var input_a = document.createElement("input");
input_a.type = "text";
input_a.className = "translate_e";
input_a.id = "translate_e"+row_length;
input_a.value = "뜻 입력";
var button = document.createElement("button");
button.addEventListener("click", function(){f_delete(row_length); });
button.id = 'delete';
button.textContent = 'delete';
div1.appendChild(p);
div2.appendChild(input_q);
div3.appendChild(input_a);
div4.appendChild(button);
div_main.appendChild(div1);
div_main.appendChild(div2);
div_main.appendChild(div3);
div_main.appendChild(div4);
document.body.appendChild(div_main);
}
function f_delete(index){
alert(index);
}
</script>
<body>
<button onclick = "create()">create element</button>
</body>
</html>button에서 onclick 함수를 적용하는 방법에는
button.onclick = "f_delete()";
도 있지만 보안과, 속도 등의 문제로
.addEventListener()를 사용한다.
주의점은 온클릭 함수에 메개변수가 없다면
button.addEventListener("click", f_delete); 로 나타내고
매게변수가 있다면
button.addEventListener("click", function(){f_delete(row_length); }); 이렇게 나타낸다.