JavaScript How to Insert Text

[ JavaScript related ] 2023. 1. 27. 13:01

텍스트 삽입

(1) innerHTML

innerHTML은 HTML 태그 요소들까지 입력해서 직접 변경할 수 있다.

(2) innerText

마크업 언어가 적용된 상태로 읽어오므로, 태그값은 불러들이지 않는다. 즉, 사용자에게 보이지 않는 값은 불러들이지 않으므로 당연히 display:none 처리가 된 값들도 불러들이지 않는다.

(3) textContent

마크업 태그를 제외한 모든 문자열을 읽고 변경할 수 있다. innerText와 다른 점은 innerText는 사용자에게 보이지 않는 텍스트 값은 가져오지 않지만, textContent는 마크업 태그를 제외한 엑스트라면 모두 불러들일 수 있다.

(4) value

input과 같은 form 요소의 값을 가져오고 싶을 때는 .value를 사용한다.

HTML

<body>

</body>

JavaScript

const test01 = document.querySelector(".test01");

const test02 = document.querySelector(".test02");

const test03 = document.querySelector(".test03");

const test04 = document.querySelector(".test04");

test01.innerHTML = `<p> innerHTML로 삽입 <p>`;

test02.innerText = ` innerText로 삽입 `;

test03.textContent = ` textContent로 삽입 `;

test04.value = `<p> value로 삽입 <p>`;

ON BROWSER

JavaScript target & currentTarget (0)	2023.01.31
JavaScript destructuring (0)	2023.01.30
JavaScript innerHTML (0)	2023.01.27
JavaScript Nullish Coalescing Operator (0)	2023.01.27
JavaScript Array.includes (0)	2023.01.27

EXㅣTDB