공부할 메서드.
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>
결과 보기
