8월 다섯째 주 TWIL

윤슬기·2019년 9월 1일

TWIL

목록 보기

6/32

JavaScript

1. 새로운 HTML 엘리먼트를 만들고 노드로 추가하는 기본적인 방법

새로운 엘리먼트를 추가하고자 하는 부모 노드에 id 속성을 부여한다. 여기서는 <main>엘리먼트에 새로운 엘리먼트를 추가한다.

<body>
  <main id="target">
    <div></div>
  </main>
</body>

id 속성으로 노드를 가져와 변수에 대입한다.
[ Document.getElementById() | MDN ]

const parentNode = document.getElementById('target');

원하는 엘리먼트를 생성한다. 여기서는 <article>을 생성한다.
[ Document.createElement() | MDN ]

const parentNode = document.getElementById('target'); 
const childNode = document.createElement('article');

생성한 노드를 부모 노드에 넣는다.
[ Node.appendChild() | MDN ]

const parentNode = document.getElementById('target');
const childNode = document.createElement('article');

parentNode.appendChild(childNode);

추가 완료된 모습. 부모 노드 안 가장 하단에 추가된다.

<body>
  <main id="target">
    <div></div>
    <article></article>
  </main>
</body>

2. 상단에 새로운 노드를 추가하기

이번에는 부모 노드 안에서 가장 앞에 <h1>태그를 추가해본다.

<body>
  <main id="target">
    <article></article>
  </main>
</body>

새로운 노드를 추가할 부모 노드를 가져오고, 새로운 노드를 생성한다.

const parentNode = document.getElementById('target');
const childNode = document.createElement('h1');

insertBefore()를 이용해 새로운 노드를 추가한다.
[ Node.insertBefore() | MDN ]

const parentNode = document.getElementById('target');
const childNode = document.createElement('h1');

parentNode.insertBefore(childNode, parentNode.firstChild);

추가된 모습

<body>
  <main id="target">
    <h1></h1>
    <article></article>
  </main>
</body>

3. JS에서 HTML 태그의 속성과 변수를 동적으로 추가하기

<button>태그를 하나 만들었다.

const targetEl = document.createElement('button');

아래와 같은 방법으로 여러가지 HTML 태그 속성과 변수를 설정할 수 있다.

targetEl.id = 'btn';
targetEl.className = 'btn';
targetEl.name = 'btn';
// targetEl.onclick = function(){console.log('hello')};
targetEl.onclick = anyFunctionYouWant;

function anyFunctionYouWant() {
  console.log('All I Want Is...');
}

설정한 결과. onclick 속성은 직접적으로 보여지지 않았다.

<button id="btn" class="btn" name="btn"></button>

4. 노드 값과 내용을 지우고, 없애고, 페이지를 새로고침하기

특정 엘리먼트의 value 없애기

const inputText = document.getElementById('input-text');

function resetInput(el) {
  el.value = '';
}

resetInput(inputText);

특정 엘리먼트의 내용을 없애기

const mainPage = document.getElementById('main');

function resetInnerInfo(el) {
  el.innerHTML ='';
}

resetInnerInfo(mainPage);

페이지 새로고침하기(캐시까지 삭제)
[ Location.reload() | MDN ]

function resetPage() {
  location.reload(true);
}

윤슬기

👩🏻‍💻

이전 포스트

8월 넷째 주 TWIL

다음 포스트