• 회원가입
  • 로그인
  • 구글아이디로 로그인

[HTML_CSS] JQ - append(), prepend(), after(), before() 메서드 - (요소추가 / 내용추가) 메서드

공부할 메서드.

 

append() - 선택요소 안 부분에 내용 삽입.

prepend() - 선택요소 안 시작 부분에 내용 삽입.

after() - 선택요소 밖 에 내용 삽입

before() - 선택요소 밖 에 내용 삽입

 

 

append() 예제 - 선택요소 끝 부분에 내용 삽입.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#btn1").click(function(){

        $("p").append(" <b> is best.</b>.");

    });


    $("#btn2").click(function(){

        $("ol").append("<li>more</li>");

    });

});

</script>


<p>홈짱닷컴</p>

<p>Homzzang.com</p>


<ol>

  <li>HTML</li>

  <li>CSS</li>

  <li>JS</li>

</ol>


<button id="btn1">text를 뒤에 추가하기</button>

<button id="btn2">list를 뒤에 추가하기</button>


결과 보기

 

prepend() 예제 - 선택요소 앞 부분에 내용 삽입.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#btn1").click(function(){

        $("p").prepend(" <b>Welcome to </b>");

    });


    $("#btn2").click(function(){

        $("ol").prepend("<li>기초입문</li>");

    });

});

</script>


<p>홈짱닷컴</p>

<p>Homzzang.com</p>


<ol>

  <li>HTML</li>

  <li>CSS</li>

  <li>JS</li>

</ol>


<button id="btn1">text를 앞에 추가하기</button>

<button id="btn2">list를 앞에 추가하기</button>


결과 보기

 

append(), prepend() 예제 - 여러 요소 추가.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

function appendText() {

    var txt1 = "<p>홈짱닷컴</p>";  // HTML 방식

    var txt2 = $("<p></p>").text("Homzzang.com");  // JQ 방식

    var txt3 = document.createElement("p"); // JS 방식

    txt3.innerHTML = "HTML, CSS, JS"; 

    $("body").append(txt1, txt2, txt3); 

}

  

 function prependText() {

    var txt1 = "<p>홈짱닷컴</p>";  // HTML 방식

    var txt2 = $("<p></p>").text("Homzzang.com"); // JQ 방식

    var txt3 = document.createElement("p"); // JS 방식

    txt3.innerHTML = "HTML, CSS, JS";

    $("body").prepend(txt1, txt2, txt3);

}

</script>


<p>무료로 웹 강의 사이트 소개</p>

<button onclick="appendText()">뒤에 추가</button>

<button onclick="prependText()">앞에 추가</button>


결과 보기


after()before() 예제 - 1개 요소 추가.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#btn1").click(function(){

        $("img").before("<p><b>홈짱닷컴</b></p>");

    });


    $("#btn2").click(function(){

        $("img").after("<p><i>Homzzang.com</i></p>");

    });

});

</script>


<img src="https://homzzang.com/data/logo-planner/1993870266_2ba60bdc_spelling.png" alt="logo"><br><br>


<button id="btn1">앞에 사이트이름 추가</button>

<button id="btn2">뒤에 도메인주소 추가</button>


결과 보기

 

after(), before() 예제 - 여러 요소 추가.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

function afterText() {

    var txt1 = "<b>홈짱닷컴</b>";  // HTML 방식

    var txt2 = $("<i></i>").text(" Homzzang.com ");  // JQ 방식

    var txt3 = document.createElement("b");  // JS 방식

    txt3.innerHTML = "HTML, CSS, JS";

    $("img").after(txt1, txt2, txt3);

}

  

function beforeText() {

    var txt1 = "<b>홈짱닷컴</b>";  // HTML 방식

    var txt2 = $("<i></i>").text(" Homzzang.com "); // JQ 방식

    var txt3 = document.createElement("b");  // JS 방식

    txt3.innerHTML = "HTML, CSS, JS";

    $("img").before(txt1, txt2, txt3);

}

</script>


<img src="https://homzzang.com/data/logo-planner/1993870266_2ba60bdc_spelling.png" alt="logo" style="display:block;">


<button onclick="afterText()">이미지 뒤에 추가</button>

<button onclick="beforeText()">이미지 앞에 추가</button>


결과 보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Effect JQ - animate() 메서드 ★★★★★ - 움직이게 하기. (= 움직임 실행/설정 = 동적 애니 효과…
Effect JQ - stop() 메서드 ★ - 멈추게 하기 (= 슬라이드/애니 중단 = 움직임 멈추기/멈춤 = stop…
Effect JQ - Callback (콜백함수) ★ - 추가 호출 실행 함수
Effect JQ - Chaining 기법 ★ - 여러 메서드 연쇄 실행. (= 메서드 이어서 실행시키기. = 체이닝)
HTML_CSS JQ - text(), html(), val() , attr() 메서드 - (내용얻기/값얻기/속성얻기) (내… 2
HTML_CSS JQ - append(), prepend(), after(), before() 메서드 - (요소추가 / 내용…
HTML_CSS JQ - remove() / empty() 메서드 - (요소제거 / 내용삭제 / 내용비우기) ※ 리무브, 엠…
HTML_CSS JQ - addClass() , removeClass() , toggleClass() , css() 메서드 …
HTML_CSS JQ - css() 메서드 ★★★ - CSS 설정/반환 (= CSS메서드 = 스타일메서드) ※ 스타일 주기
HTML_CSS JQ - width() , height() , innerWidth() , innerHeight() , out…
Traversing JQ - Traversing - 특정요소찾기 (= 특정요소선택 = 트래버싱)
Traversing JQ - parent() , parents() , parentsUntil() 메서드 - 부모요소찾기 (= 부…
Traversing JQ - children() 메서드 - 자식요소찾기 / find() 메서드 - 자손요소찾기
Traversing JQ - 형제찾기 메서드 - siblings() , next() , nextAll() , nextUntil(…
Traversing JQ - 검색필터링 메서드 - first() , last() , eq() , filter() , not() …
AJAX JQ - AJAX (아작스) 소개 - 정의 / 기본예제 / 메서드종류
AJAX JQ - load() 메서드 ★ - 파일 내용 가져오기 (= load메서드 = 아작스 로드메서드)
AJAX JQ - get()/post() 메서드 - 서버에 정보요청 (= get메서드 = 겟메서드 / post메서드 …
Misc JQ - noConflict() 메서드 ★★★ - javascript (JS) 기반의 다른 프레임워크와의 충…
Examples jQuery Examples - 제이쿼리 예제 복습
2/15
목록
찾아주셔서 감사합니다. Since 2012