코린이 코딩기록/Java script

unShift랑 비슷한 개념의 메소드 찾아오기 - prepend / append

오설탕 2022. 4. 26. 22:24

📌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>