[jQuery] html에 element를 더하고 바꾸는 방법

js에서는 어떠한 element를 더할때

 

parent.appendChild(childElement)를 사용한다

 

jQuery에도 비슷한 것들을 사용하여 html에 element들을 더할 수 있다.

 

우선 html을 만들어보자

<div>

   <ul>
      <li>나는 처음이다</li>
   
   
   </ul>
   
</div>

이러한 html이 있다고 해보자.

 

1. append()

 

우리는 ul의 마지막에 또다른 li element를 추가하고 싶다고 하면 이런 방법을 사용할 수 있다.

let newLi = "<li>나는 마지막!</li>"

$('ul').append(newLi);

append는 ul 안의 마지막에 newLi를 더할 것이다.

 

결과는 

<div>

   <ul>
      <li>나는 처음이다</li>
      
      <li>나는 마지막!</li>
   </ul>
   
</div>

이러할 것이다.

 

2. prepend();

append()와 비슷하지만 prepend()는 마지막이 아닌 처음에 더한다.

그러니까 prepend()를 사용하는 object의 제일 첫번째 child가 되는 것이다.

 

3.after()

let newLi = "<li>나는 다음이다</li>";

$('ul li').after(newLi);

 

말그대로 선택된 ul li 다음에 더해진다.

 

4.before()

말그대로 after()의 반대다 전에 더한다.

 

 

5. html()

html 메소드를 사용하는 element 안에있는 모든 HTML을 바꾼다.

innerHTML이랑 비슷하다고 생각하면됨.

<div>

   <ul>
      <li>나는 처음이다</li>
      
      <li>나는 마지막!</li>
   </ul>
   
</div>

 이런 코드가 있다고 치자

let inner = "<li>이제 안에는 나밖에없다</li>"

$('ul').html(inner);

 

이런식으로 ul안을 inner의 값으로 모두 바꿀 수 있다.

 

6.text()

이것은 안의 모든것을 바꾸는게 아니라 text만 바꾸는 것이다. 그렇기에 바꾸는 값도 plain text여야만 한다.