[JS] Javascript 요소 동적으로 내용 수정

JS에서 동적으로 수정하고 삭제할 때 Javascript의 표준 API와 JQuery를 사용하여 구현할 수 있다. 

• .append(): 요소 내부의 뒤에서부터 내용을 채운다.

<div id="target">
  <p class="first-text">안녕하세요</p>
</div>

<script type=text/javascript>
	$("#target").append('<p>안녕히가세요</p>');
</script>

• .prepend(): 요소 내부의 앞에서부터 내용을 채운다.

<div id="target">
  <p class="first-text">안녕하세요</p>
</div>

<script type="text/javascript>
	$("#target").prepend('<p>안녕히가세요</p>');
</script>

• .remove(): 요소 자체를 지운다. 그래서 그 뒤로 jquery로 읽어낼 수 없다.

<div id="target">
  <p class="first-text">안녕하세요</p>
</div>

<script type="text/javascript">
	$("#target").remove();
</script>

• .empty(): 요소 내부를 비운다. 보통 append나 prepend 하기 전에 사용

<div id="target">
  <p class="first-text">안녕하세요</p>
</div>

<script type = "text/javascript>
	$("#target").empty();
</script>

• .html(): 요소 내부를 비우고 태그를 실행한 내용을 채운다. 또는 태그 포함한 채로 내용을 가져올 수 있다.
• .text(): 요소 내부를 비우고 태그 포함 있는 그대로 내용을 채운다. 또는 태그를 제외한 내용만 가져온다.
• removeChild() : 부모에서 특정 자식 요소를 삭제한다.
• appendChild() : 부모 요소에 자식 요소를 추가한다.