자바스크립트로 html에 글쓰기

1. document.querySelector(' ') 와  textContent, value

(1) JavaScript에서 태그 선택하기 cf. CSS설명도 함께

<script>
document.querySelector('button').textContent = "버튼입니다"
document.querySelector('input').value ="인풋입니다"
</script>

확장자를 .html로 한 상태에서 CSS와 JavaScript를 쓰는 경우

CSS는 <style> </style> 안에 넣고

JavaScript는 <script> <script>안에 넣는다.

 

그런데, CSS와 JavaScript를 코딩하면서 html 태그와 관련해 바꾸고 싶은 게 있다면 어떻게 해야할까?

CSS는 선택자를 활용한다

<style>
  a{
  }
  .ClassName{
  }
  #idName{
  }
</style>

-> 태그, 클래스, 아이디를 통해 해당 부분을 선택하면 된다.

 

JavaScript는 document.querySelector을 활용한다

<script>
  document.querySelector('a');
  document.querySelector('.ClassName');
  document.querySelector('#idName');
</script>

 

(2)textContent, value

textContent와 value 태그의 내부값을 나타낸다.

<input text =" ">
<button>버튼</button>

<input text =" ">
<button>버튼</button>
<script>
  document.querySelector('input').value = "안녕하세요"
  document.querySelector('button').textContent ="버튼을 클릭하세요"
</script>

 

2. document.querySelector(' ') + innerHTML

innerHTML은 HTML 태그가 나오는 경우 이를 태그로 인식해서 반영한다

<div id="word"></div>
<script>
  let $word = document.querySelector('#word')
  $word.innerHTML = "안녕하세요"+'<br>'+'반가워요'
<script>

<br>을 태그로 인식해서 줄바꿈을 하는 것이다.

 

만약 textContent로 했다면 <br>자체를 문자열로 인식해서 <br>자체가 웹페이지에 쓰여진다.

 

3. appendChild, append  +  document.createTextNode, document.createElement

<script> 
  document.createTextNode('안녕하세요')
  document.createElement('br')
</script>

document.createTextNode(' ')는 따옴표 안의 내용을 text로 인식하고

document.createElement(' ')는 따옴표 안의 내용을 태그로 인식한다.

이 둘은 그 자체로 웹페이지에 변화를 불러일으키지는 않는다.

append를 통해 웹페이지에 그 값을 나타낼 수 있다.

 

<div id ="word"></div>
<script>
  document.querySelector('#word').appendChild(document.createTextNode('안녕하세요'))
</script>

<div id ="word"></div>
<script>
  document.querySelector('#word').append(`안녕하세요`)
</script>

append는 appendChild를 발전시킨 것으로,

1)append의 경우 document.createTextNode를 따로 쓰지 않고, 백틱, 따옴표를 통해 문자열을 추가할 수 있다 

2)append의 경우 여러 개를 같이 넣을 수 있다.

<div id ="word"></div>
<script>
  document.querySelector('#word').append(`안녕하세요`, document.createElement('br'), `반가워요`)
</script>

 

**document.querySelector('input').value ="안녕하세요"는 되는데

document.querySelector('input').append('안녕하세요')는 왜 안 될까요?