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);
}
👩🏻💻