2/14 공부

innerHTML - 요소안에 있는 HTML 자체를 문자열로 리턴

 

*태그와 태그 사이의 들여쓰기나 줄바꿈도 모두 포함.

요소안의 HTML을 확인하는 것 보다는 요소안의 HTML을 수정할 때 자주 사용.

출력시 first <li>~ last </li> 까지 출력됨.

ex) 기존 HTML

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

</ul>

 

이 상황에 JS로

<script>

const myTag = document.querySelector('#list-1');

 

myTag.innerHTML = '<li>789</li>';

</script>

를 사용한다면 

 

변경된 HTML

<ul id = "list-1">

  <li>789</li>

</ul>

처럼 바뀌어 출력된다.

 

출력 :   <li>789</li>

 

 

만약 

script에서 

myTag.innerHTML += '<li>789</li>'; 

처럼 += 을 사용한다면 해당 리스트의 마지막 부분에 추가된다.

그러면

 

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

  <li>789</li>

</ul>

로 바뀌어 출력 된다.

 

출력 :

  <li>123</li>

  <li>456</li>

  <li>789</li>

 

outerHTML - 해당 요소를 포함한 전체의 HTML 코드를 문자열로 리턴해준다.

 

innerHTML과 같이 들여쓰기와 줄바꿈이 다 있다.

 

모든 요소를 포함하고 있다보니, 값의 수정이 아닌, 값이 아예 다른 값이 되버린다.

 

기존의 출력에도 <ul>~</ul>까지 다 출력됨.

ex)

기존 HTML

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

</ul>

다음과 같은 코드가 있을 때.

myTag.outerHTML = '<ul id = "new-list"><li>789</li></ul>';

이를 적용하면

 

변경된 HTML

<ul id = "new-list">

  <li>789</li>

</ul>

이 처럼 id명도 바뀌어 출력된다.

 

textContent

- innerHTML과 비슷한데, 요소 안의 내용을 가져오는 것은 동일. 하지만 태그를 제외한 값만 가져옴.

- 역시나 innerHTML 처럼 값을 수정할 수도 있음.

 

기존 HTML

<ul id = "list-1">

  <li>123</li>

  <li>456</li>

</ul>

일때 

myTag.textHTML = 'new text';

를 사용하면

 'new text';

만 출력됨.

근데, 얘는 특수문자도 텍스트로 출력함.

ex)

myTag.textHTML = '<li>new text</li>';

를 하면

 '<li>new text</li>';

가 출력됨.

 

*이는 실제 HTML 값이 변하는게 아니라, JS를 출력한 이후 콘솔의 값이 변하는 것이라는 점을 주의해야함.

 

createElement - 원하는 태그 이름을 요소 노드로 만들 수 있음.

ex)

1. 변수 생성(기존에 ul id = one, two 존재)

const first = document.createElement('li');  // li태그 생성

2. 변수 안에 문자 넣기

first.textContent = '처음';  // 생성한 li 태그에 문자 '처음'을 넣음

3. 값이 있는 first를 prepend를 이용하여 호출한 노드에 첫번째 노드로 값 추

two.prepend(first); // prepend(변수) 

-> 메소드를 호출한 노드의 제일 첫번째 자식 노드로  파라미터로 전달한 값을 추가할 수 있음

two.append(last); // append(변수) 

-> 메소드를 호출한 노드의 제일 마지막 자식 노드로 파라미터로 전달한 값을 추가할 수 있음

two.before(prev); // before(변수) 

-> 메소드를 호출한 노드의 앞쪽에 파라미터로 전달한 값을 형제노드로 추가할 수 있음

two.after(next); // after(변수) 

-> 메소드를 호출한 노드의 뒤쪽에 파라미터로 전달한 값을 형제노드로 추가할 수 있음

빨간색으로 적은 파라미터(first,last,prev,next)자리에 파라미터가 아닌 문자열을 넣으면

문자열이 출력되고, 문자열을 적고, 파라미터를 적는 등 여러가지를 적으면 순차적으로 값이 

나열된다.

 

*prepend 나 before의 경우에는 요소를 앞으로 추가하기 때문에 여러개의 값을 전달하게 되면 

역순으로 추가될 거라고 오해할 수 있는데 적은 그대로 한꺼번에 출력된다.

 

노드를 삭제하거나 이동

 

삭제

 

two.remove(); 원하는 노드를 선택하여 호출한 뒤 remove 를 사용하면 자식노드가 모두 삭제됨.

- 자식 요소를 선택하여 삭제하는법

one.children[2].remove();

 

이동

 

(prepend,append,before,after 이용)

 

one.append(two.children[1]); -> one 노드의 마지막 노드로 two노드의 2번째 자식노드가 이동한다.

two.children[1].after(one.children[1]); -> two 노드의 2번째 자식노드 다음으로 one 노드의 2번째 자식 노드가 이동한다.