๐น jQuery - manipulation [clone]
๐ clone ์์๋ณด๊ธฐ
clone์ ์ ํ๋ ์์๋ฅผ ๋ณต์ ํ๋ฉฐ ๋งค๊ฐ๋ณ์๋ฅผ ํตํด
๋ณต์ ๋ฅผ ์คํํ ์ง ๋ง์ง๋ฅผ ์ ํํ ์ ์์ต๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>day65-1_manipulation_clone.html</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/day65-1_script.js"></script>
</head>
<body>
<h2>clone ์์๋ณด๊ธฐ</h2>
<p>
clone์ ์ ํ๋ ์์๋ฅผ ๋ณต์ ํ๋ฉฐ ๋งค๊ฐ๋ณ์๋ฅผ ํตํด
<br>๋ณต์ ๋ฅผ ์คํํ ์ง ๋ง์ง๋ฅผ ์ ํํ ์ ์์ต๋๋ค.
</p>
<header>
<h3>content title</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam asperiores iure molestiae, cupiditate quibusdam unde repellendus obcaecati. Officiis?
</p>
</header>
<div class="content"></div>
</body>
</html><script>
$(function(){
//$('header').appendTo('.content');
$('header').clone('.content');
//header๋ฅผ ctrl+c๋ฅผ ํด๋์ ์ํ
//$('header').clone();
//ctrl+v๋ก ๋ณต์ ๋ ๋ฌธ์๋ฅผ ๋ถ์ฌ๋ฃ๊ธฐํฉ๋๋ค.(appendTo)
$('header').clone().appendTo('.content');
});
</script><script>
$(function(){
var txt = [];
txt[0] = '์ฒซ๋ฒ์งธ ์ํฐํด',
txt[1] = '๋๋ฒ์งธ ์ํฐํด',
txt[2] = '์ธ๋ฒ์งธ ์ํฐํด',
txt[3] = '๋ค๋ฒ์งธ ์ํฐํด',
txt[4] = '๋ค์ฏ๋ฒ์งธ ์ํฐํด',
txt[5] = '์ฌ์ฏ๋ฒ์งธ ์ํฐํด',
txt[6] = '์ผ๊ณฑ๋ฒ์งธ ์ํฐํด',
txt[7] = '์ฌ๋๋ฒ์งธ ์ํฐํด';
// 7๋ฒ ๋ฐ๋ณตํ๊ธฐ i๋ 1~7๋ฒ
for(var i = 0; i < 8; i++){
//์ํฐํด์.๋ณต์ฌํ๋ค.์ํฐํด๊ทธ๋ฃน์ ๋ง์ง๋ง ์์์ ์ถ๊ฐํ๋ค.i(7)๋ฒ
$('.clone article').clone().appendTo('.ga07 .artGroup');
//์ํฐํด์.i๋ฒ ์ธ๋ฑ์ค์๊ฒ.h4์ ์ฐพ์์.txt[i]์ ํ
์คํธํ๋ค.
$('.ga07 article').eq(i).find('h4').text(txt[i]);
}
});
</script>
์ด์ ์ด์ ์ด์ ๐ฅ