[jQuery] 문자를 가져오거나 변경하는 .text()와 HTML 태그 구조를 포함해서 가져오거나 변경하는 .html()

.text() => textContent와 비슷 / .html() => innerHTML과 비슷

.text()

See the Pen [jQuery] .text() by mill (@millfeel) on CodePen.

 

 

// 문자 가져오기
$('선택자').text();

// 문자 변경하기
$('선택자').text('변경할 문자열');

 

[JS와 비교하기]

// JS
const $bl_palette = document.querySelector('.bl_palette');
const $el_box = document.querySelector('.el_box');

$bl_palette.addEventListener('click', function (e) {
  const target = e.target;
  if (!target.classList.contains('bl_palette_item')) return;
  const pickColor = target.textContent;
  $el_box.style.backgroundColor = pickColor;
  $el_box.textContent = pickColor;
})

// jQuery
$(function(){
  $('.bl_palette_item').click(function(){
    const pickColor = $(this).text();
    $('.el_box').css({backgroundColor: pickColor}).text(pickColor);
  })
});

---

.html()

See the Pen [jQuery] .html() by mill (@millfeel) on CodePen.

 

 

// HTML 구조 가져오기
$('선택자').html();

// HTML 구조 변경하기
$('선택자').html('변경할 html 구조');

 

[JS와 비교하기]

// JS
const $btn = document.querySelector('button');
const $div = document.querySelector('div');

$btn.addEventListener('click', function () {
  $div.innerHTML = '<h1>변경후 입니다.</h1>';
});

$div.addEventListener('click', function () {
  const abc = this.innerHTML;
  alert(abc);
})

// jQuery
$(function () {
  $('button').click(function (){
    $('div').html('<h1>변경후 입니다.</h1>')
  });
  $('div').click(function () {
    const abc = $(this).html();
    alert(abc);
  })
})

---

[공부좌표]

[JS] innerHTML, innerText, textContent의 차이

인터랙티브 웹디자인북 p147