01. append 함수
문법
.append( content [, content ] )
append 함수는 선택한 요소의 내용의 끝에 새로운 콘텐츠를 추가할 수 있습니다.
예제 소스
<html lang="ko">
<head>
<title>kkamikoon javascript</title>
<script>
$( document ).ready( function() {
$( 'ul' ).append( '<li>Test3</li>' );
} );
</script>
</head>
<body>
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
</body>
</html>
결과
<body>
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</body>
위와 같이 Test3의 태그가 하나 추가되는 것을 볼 수 있습니다.
02. append 함수 응용
이를 특정 id 값을 지정해주어 해당 요소에 값을 추가해줄 수 있습니다.
예제는 다음과 같습니다.
예제 소스
<script>
function TestList()
{
var tmp = "";
tmp = tmp + "<li> It is Test </li>"
$("test_list").append(tmp);
}
</script>
<div id="test_list"></div>
위의 예제 소스에서 TestList 함수를 실행시키면 다음과 같은 결과값으로 HTML이 변경됩니다.
결과
<!--한 번 수행됐을 때--> <div id="test_list"><li> It is Test </li></div> <!--여러 번 수행됐을 때--> <div id="test_list"><li> It is Test </li><li> It is Test </li><li> It is Test </li></div>
'WEB PROGRAMMING > Javascript 응용' 카테고리의 다른 글
| [Javascript] 자바스크립트로 로딩중 화면 만들기(로딩 표시) (4) | 2019.03.05 |
|---|---|
| [Javascript] onchange 이벤트로 내용 변경 감지 (6) | 2019.02.19 |
| [JQuery] remove() 함수를 이용하여 콘텐츠를 삭제하는 방법 (0) | 2019.02.06 |
| [Javascript] 요소(Element)의 속성(Attribute) 값 변경하기/설정하기 (0) | 2019.02.05 |