자바스크립트(Document Object Model) createElement, innerHTML, appendChild [1-4]

이정민·2021년 4월 15일
0
<ul class="ulTag">
<li class="jung">
<img src="images/,,,1></li>
<li class="jung"><img src="image/,,,2></li>
</ul>

<script>
var ulTag = document.querySelector('.ul-tag');
var listElem = document.createElement('li');
listElem.innerHTML = '정민';
ulTag.appendChild(listElem);
</script>

document.createElement('li'); 를 사용하여
변수 listElem 에 넣는다.

listElem.innerHTML = '정민이'; 를 통해 li태그에 '정민이'라는 텍스트를 넣어준다.
(여기까지는 화면에 출력이 안되는 상태 어디에 넣어줘야 할지 자리를 지정해줘야한다. innerHTML은 속성)

ulTag.appendChild(listElem); 이용해서 ul태그에 넣어준다.

(어떤 데이터를 읽은 다음에 나중에 추가해야 될 상황이 있을때 필요할것 같다.)

profile
안녕하세요.

0개의 댓글