티스토리 뷰

jQuery/html

jQuery: add, remove

carrot62 2020. 7. 31. 01:23

1. HTML element 추가하기

특히 append()는 많이 쓰이는 함수이니 기억하도록 하자! Form처럼 사용자로부터 입력값을 받아올 때 항목을 더 추가 하게 할 때 자주 쓰인다.

  • append(): 뒤에 element를 추가
  • prepend(): 앞에 element를 추가
  • after(): 지정된 element들 이후에 내용 추가
  • before(): 지정된 element들 이전에 내용 추가

예시) list 항목 추가하는 방법 (index로 현재 추가된 항목의 개수도 표시되도록 했다)

<script>
	var j=1;
	$("#appendbtn2").click(function(){
            $("ol").append("<li>Appended item: "+ "index: "+ j + "</li>");
            j++;	//항목을 추가할 때마다 index를 1씩 증가
        });
</script>

<body>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<button id="appendbtn2">Append list items</button>
</body>

append()

Append 하고 싶은 html content를 직접 적어도 되고, 아니면 (html content를 이미 지정한)변수를 이렇게 연달아서 넣는 것도 가능하다. 예) $("body").append(txt1, txt2, txt3);

after() 와 before()

지정한 항목 이후와 이전에 html content를 추가하는 방법이다

$("img").after("Some text after");

$("img").before("Some text before");

2. HTML element 제거하기

  • remove(): 지정 element를(child element도 함께) 제거
    • child element중에서도 특정 element를 지우고 싶다면 remove(".classname")을 사용한다
  • empty(): 지정 element의 child element를 제거
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>

</div>
<br>

<button>Remove div element</button>

</body>
</html>

remove 또는 empty 하기 이전
remove 한 후에
empty 한 후에

 

'jQuery > html' 카테고리의 다른 글

jQuery: CSS classes, dimensions  (0) 2020.07.31
jQuery: text(), html(), val()  (0) 2020.07.30