반응형
1. 버튼을 클릭하면 'c언어' 텍스트를 복사해서 list 마지막 요소로 넣기
2. 버튼을 클릭하면 'c언어' 텍스트를 복사해서 li 태그의 텍스트를 대체하기
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.6.4.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 1. 버튼을 클릭하면 'c언어' 텍스트를 복사해서 list 마지막 요소로 넣기 -->
<!-- 2. 버튼을 클릭하면 'c언어' 텍스트를 복사해서 li 태그의 텍스트를 대체하기 -->
<body>
<ul id="list">
<li>자바스크립트</li>
<li id="c">C언어</li>
<li>자바</li>
</ul>
<button id="btn">click(복사)</button>
<button id="btn2">click(대체)</button>
</body>
</html>
<script>
// 1. 복사
$(function() {
$("#btn").on("click", function(){
$("#c").clone().appendTo("#list");
})
})
// 2. 대체
$(function() {
$("#btn2").on("click", function(){
$("#c").replaceAll("li");
})
})
</script>
반응형
'Java Script > JQuery' 카테고리의 다른 글
| [JQuery] each, toggleClass #0418수업 #4교시 (0) | 2023.04.18 |
|---|---|
| [JQuery] 부모자식 요소 #0418수업 #4교시 (0) | 2023.04.18 |
| [JQuery] 기본문법 #0414수업 #4교시 (0) | 2023.04.14 |
| [JQuery] 기본문법 #0414 수업 #3교시 (0) | 2023.04.14 |
| [JQuery] $function(){} 기본문법 #0414 수업 #2교시 (0) | 2023.04.14 |