티스토리 뷰
이론/jQuery
[jQuery] 문자를 가져오거나 변경하는 .text()와 HTML 태그 구조를 포함해서 가져오거나 변경하는 .html()
millfeel1298 2021. 10. 24. 01:23.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
'이론 > jQuery' 카테고리의 다른 글
[jQuery] .scrollTop() (0) | 2021.10.24 |
---|---|
[jQuery] e.pageX / e.pageY (0) | 2021.10.24 |
[jQuery] .addClass() .removeClass() (0) | 2021.10.24 |
[jQuery] .hide() .show() .fadeOut() .fadeIn() (0) | 2021.10.23 |
[jQuery] .width() .height() (0) | 2021.10.23 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 객체의 프로퍼티
- offsetHeight
- @font-face
- clinetTop
- 부등 연산자
- outerHeight
- __proto__
- 불일치 연산자
- 일치 연산자
- scrollHeight
- 프로퍼티
- 대괄포 표기법
- scrollTop
- prototype 프로퍼티
- 링크막기 #a링크막기
- innerHeight
- offsetTop
- clientHeight
- 점 표기법
- 동등 연산자
- javascript class
- property
- [[Prototype]]
- constructor
- 동치 연산자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
글 보관함