생성,조회,수정
document.createElement()
= 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환합니다.
ex)
const divEl = document.createElement('div')
console.log(divEl)
<div></div>const inputEl = document.createElement('input')
console.log(inputEl)
<input>E.prepend() / E.append()
= 노드를 요소의 첫 번째 혹은 마지막 자식으로 삽입합니다.
ex)
const parentEl = document.querySelector('.parent')
const el = document.createElement('div')
el.textContent = 'Hello~'
parentEl.prepend(new Comment(' 주석 ')) // 주석을 첫 번째 자식으로 삽입
parentEl.append(el)
parentEl.append('Text!')
E.remove()
= 요소를 제거합니다.
ex)
const el = document.querySelector('.child')
el.remove()
E.insertAdjacentElement()
= '대상 요소'의 지정한 위치에 '새로운 요소'를 삽입합니다.
= 대상요소.insertAdjacentElement(위치, 새로운요소)
/* html */ `
<!-- 'beforebegin -->
<div class="target">
<!-- 'aftebegin' -->
Content!
<!-- 'beforeend' -->
</div>
<!-- 'afterend' -->`
const childEl = document.querySelector('.child')
const newEl = document.createElement('span')
newEl.textContent = 'Hello~'
childEl.inserAdjacentElement('beforebegin', newEl)N.insertBefore()
= 부모 노드의 자식인 참조 노드의 이전 형제로 노드를 삽입합니다.
= 부모노드.insertBefore(노드, 참조노드)
ex)
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const newEl = document.createElement('span')
newEl.textContent = 'Hello~'
parentEl.insertBefore(newEl, childEl)
N.contains()
= 주어진 노드가 노드의 자신을 포함한 후손인지 확인합니다.
= 노드.contains(주어진 노드)
ex)
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
console.log(parentEl.contains(childEl)) // true
console.log(document.body.contains(parentEl)) // true
console.log(document.body.contains(childEl)) // ture
console.log(document.body.contains(document.body)) // ture
console.log(parentEl.contains(parentEl)) // true
console.log(parentEl.contains(document.body)) // false
console.log(childEl.contains(document.body)) // false
N.textContent
= 노드의 모든 텍스트를 얻거나 변경합니다.
ex)
const el = document.querySelector('.child')
console.log(el.textContent) //1
// el.textContent = '7'
console.log(el.textContent) // 7
E.innerHTML
= 요소의 모든 HTML 내용을 하나의 문자로 얻거나,새로운 HTML을 지정합니다.
= 자주 사용됨
ex)
const el = document.querySelector('.parent')
console.log(el.innerHTML) // 자식요소들
el.innerHTML = '<span style="color: red;"> Hello~</span>'