[Examples] JQ - (부모요소・자식요소) 데이터값・입력값 변경

기본 상태: <p class="ab" >a <span class="b">b</span></p>

해결1 - a를 span으로 묶기

<script src="http://code.jquery.com/jquery-latest.js"></script>

<p class="ab" >

  <span class="a">a</span> 

  <span class="b">b</span>  

</p>

 

<script>

$(".a").text("c");

$(".b").text("d");

</script>

 

결과보기

방법2 - append() 메서드로 자식 요소를 덧붙이기

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<p class="ab" >  a

  <span class="b">b</span>  

</p>

 

<script>
$(".ab").text("c").append("<span>d</span>");

</script>

 

결과보기

방법3 ★ - 자식 요소 제외한 순수한 데이터 값만 변경

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<p class="ab" >  a

  <span class="b">b</span>  

</p>

 

<script>

var a = $(".ab").contents().get(0);

a.data = "c";

$(".b").text("d");

</script>

 

결과보기

관련글 https://sir.kr/qa/358937

PS. 아래 처럼 하면 안 됨.

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<p class="ab" >  a

  <span class="b">b</span>  

</p>

 

<script>

$(".ab").text("d");

$(".b").text("d");

</script>

 

결과보기