📌append ( 요소를 내부의 끝부분에서 삽입 )
appendChild와 다른점은 자바스크립트 함수이다.
그래서 노드를 추가하는게 아니라 문자열도 추가가 가능하고 여러개 문자나 요소를 추가할 수 있다.
하지만 appendChild와 다르게 값을 리턴하지 않고 추가만 한다.
그래서 console.log로 찍어도 undefined가 출력된다.
const div = document.createElement('div');
const span = document.createElement('span');
document.body.append(div,span,'hello');
appendChild처럼 요소를 만들지 않아도 바로 원하는 문자열을 삽입할 수 있다.
여러개의 요소나 문자를 한번에 추가 가능
📌prepend ( 요소를 내부의 시작 부분에서 삽입 )
append는 선택한요소 내부 맨뒤에 추가가 되지만 prepend는 맨 앞에 추가가 된다.
append와 같이 문자열, 요소 추가가 가능하다.
<p> 센터 </p> 이렇게 태그가 있을경우
append() 는 <p> 센터 여기에 값이들어감</p>
prepend() 는 <p>여기에 값이들어감 센터 </p>
after() 는 <p> 센터 </p>여기에 값이들어감
before() 는 여기에 값이들어감<p> 센터 </p>
'코린이 코딩기록 > Java script' 카테고리의 다른 글
버튼 클릭했을 때 버튼의 배경색 바뀌게 하기 (0) | 2022.04.30 |
---|---|
쉬어가기~ 니코스킬 객체로 만들기 (0) | 2022.04.28 |
Element.classList ★★★ (0) | 2022.04.26 |
★★★ Document.createElement() / createTextNode() / appendChild() - 요소를 추가하기 (0) | 2022.04.26 |
getElementById / getElementByClassName (0) | 2022.04.26 |