Written by php-style
on 

1028_jQuery : append, prepend, before, after, wrap, clone,

1028_jQuery : append, prepend, before, after, wrap, clone,

1. append/appendTo, prepend/prependTo

메소드 연습 예제 $(function() { // 마지막에 새로운 요소 추가 $(".box1 ul").append("

  • C/C++
    • "); $("
  • HTML 5
    • ").appendTo(".box2 ul"); // 첫 번째에 새로운 요소 추가 $(".box3 ul").prepend("
  • JSP/Servlet
    • "); $("
  • ORACLE
    • ").prependTo(".box4 ul"); }) 조작(Manipulation) 자바 스프링 javascript css ASP.NET PHP MariaDB MySQL

    2. before, after

    메소드 연습 예제 $(function() { var a = 0, b = 0; $(".btn1").click(function () { $("p.p2").before("

    앞-"+(++a)+"번째 문장 추가

    "); }); $(".btn2").click(function () { $("p.p2").after("

    뒤-"+(++b)+"번째 문장 추가

    "); }); }); 조작(Manipulation) Node.js 앞에 추가 Node.js 뒤에 추가 자바스크립트 Node.js vue.js

    3. wrap, wrapAll, wrapInner

    메소드 연습 예제 *{ padding: 0; margin: 0; } body { font-size:14px; font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; } a:hover, a:active { color: tomato; text-decoration: underline; } .btn{ color:#333; font-weight:500; border:1px solid #ccc; background-color:#fff; text-align:center; cursor:pointer; padding:3px 10px 5px; border-radius:4px; } ul { list-style: none; } li{ padding: 0; } h3{ margin: 30px; } .box{ box-sizing: border-box; width: 350px; min-height: 50px; margin: 20px auto; border: 3px dotted gray; padding: 15px; } label { background: yellow; } $(function() { // p태그를 각각 새로운 div로 감싸기 $(".btn1").click(function () { $("p").wrap("

    "); }); // 모든 ul을 하나의 div로 감싸기. ul 사이에 p태그 등이 존재하면 모든 ul은 묶고 p 태그는 아래로 간다. $(".btn2").click(function () { $("ul").wrapAll("
    "); }); // 선택한 요소 안을 감싸기 $(".btn3").click(function () { $("p").wrapInner(""); }); }); 조작(Manipulation) p 태그를 각 div로 감싸기 모든 ul태그를 하나의 div로 감싸기 p 태그 안에 label 태그 추가 자바스크립트 CSS 자바 스프링 데이터베이스 오라클 MYSQL

    4. clone

    메소드 연습 예제 $(function() { $("ul li").click(function() { alert($(this).text()); }); $(".btn").click(function() { // box1의 ul을 복사하여 box2에 추가. $(".box1 ul").clone().appendTo(".box2"); // 이벤트는 복제되지 않음. 실행순서가 늦어서.. // box3의 ul을 복사하여 box4에 추가. 이벤트도 복제 $(".box3 ul").clone(true).appendTo(".box4"); }); }); 조작(Manipulation) 복사하기 자바 스프링 파이썬 HTML javascript css

    from http://development-writing.tistory.com/338 by ccl(S) rewrite - 2021-10-28 23:00:50