div 동적 생성 (appendChild) 자바스크립트

appendChild를 사용하여 div를 동적으로 추가해주는 자바스크립트입니다.

<script type="text/javascript">

function add_div(){

    var div = document.createElement('div');

    div.innerHTML = document.getElementById('room_type').innerHTML;

    document.getElementById('field').appendChild(div);

}

function remove_div(obj){

document.getElementById('field').removeChild(obj.parentNode);

}

</script>

아래와 같은 html이 있으면,  추가버튼을 클릭하면 room_type이란 id를 가진 div를 복사하여

field란 id를 가진 div에 생성해주는 소스입니다.

삭제를 눌렀을경우에는 삭제해주는 소스입니다.

<input type="button" value="추가" onclick="add_div()"><br/>

<div id="room_type">

<div class="form-group">

<label for="image">제목</label>

<input type="text" id="title" name="title" class="form-control" ></input>

</div>

<input type="button" value="삭제" onclick="remove_div(this)">

</div>

<div id="field"></div>