JQuery DOM 조작

append()

• 선택한 요소의 자식 맨 뒤에 요소를 추가

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

$("ul").append("<li>4</li>");

appendTo()

• 생성할 요소를 삽입해야할 요소의 마지막 자식으로 추가
• $('삽입할 요소').appendTo('삽입하고 싶은 요소')

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

$("<li>4</li>").css("color", "red").appendTo("ul");

prepend()

• 선택한 요소의 첫번째 자식으로 요소 추가

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

$("ul").prepend("<li>JJamVa</li>");

prependTo()

• 생성할 요소를 삽입해야할 요소의 자식 맨앞에 추가

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

$("<li>JJamVa</li>").prependTo("ul");

before()

• 선택한 요소의 앞에 형제요소로 추가

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

$("ul").before("<p>안녕하세요</p>");

after()

• 선택한 요소의 뒤에 형제요소로 추가

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

$("ul").after("<p>안녕하세요</p>");