<jQuery> 2. DOM
by BFine1.$()
객체 생성 태그
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var k = $("#test");
k.css("width", "150px").css("height", "50px").css("background-color", "aqua");
var k2 = $("<p> hellow world!</p>");
k2.appendTo(k); // appendTo--> k에 k2를 붙이겠다
});
</script>
</head>
<body>
<div id="test">
</div>
</body>
실행
2.Object insert&add
삽입 : append, prepandTo, prepand
추가: insertAfter, after, insertBefore, before
<script>
$(document).ready(function () {
var k = $("div");
var k2 = $("<p> hellow world!</p>");
k2.appendTo(k); // k 내부에 붙인다
//= k.append(k2);
var k3 = $("<h1>Take your time</h1>");
k3.prependTo(k2); // k 내부 맨 앞에 붙인다
//k2.prepend(k3);
var k4 = $("<ul><li>java<li></ul>");
k4.insertAfter(k); // k 뒤 외부에 붙인다
// k.after(k4);
var k5 = $("<ul><li>jQuery<li></ul>");
k5.insertBefore(k); // k 앞 외부에 붙인다.
// k.before(k5)
});
</script>
</head>
<body>
<div>
</div>
</body>
실행
3. copy
<script>
$(document).ready(function () {
var cln = $("#sp").clone(); //복사 객체 생성
cln.appendTo($("#sp"));
});
</script>
<style>
#sp{
background-color:cornflowerblue;
text-align:center;
}
</style>
</head>
<body>
<div id="sp">yy</div>
</body>
실행
'공부(2018~2019) - 스킨변경전 > Javascript' 카테고리의 다른 글
| <jQuery> 3. Event (0) | 2018.04.02 |
|---|---|
| <jQuery> 2. Method (0) | 2018.03.30 |
| <jQuery> 1. Selector (0) | 2018.03.28 |
| <jQuery> 0. basic (0) | 2018.03.28 |
| <javascript> 5. event(2) (0) | 2018.03.28 |
블로그의 정보
57개월 BackEnd
BFine