live, static

live -> document์— element๋ฅผ ์ถ”๊ฐ€/์‚ญ์ œ ํ–ˆ์„ ๋•Œ ๋ฐ”๋กœ ๋ฐ˜์˜๋จ

static -> ๋ฐ”๋กœ ๋ฐ˜์˜๋˜์ง€ ์•Š์Œ

const buttons = document.getElementById("buttons");
const sports = document.querySelectorAll("sports");


const onClickHandler = () => {
    const el = document.createElement("li"); //param์€ ํƒœ๊ทธ์ด๋ฆ„์œผ๋กœ ์—˜๋ฆฌ๋จผํŠธ ์ƒ์„ฑ, ๋‹คํ๋จผํŠธ์— ํ‘œํ˜„๋˜๋ ค๋ฉด ๋…ธ๋“œ์— ๋จผ์ € ๋ฐ˜์˜๋˜์–ด์•ผํ•จ
    el.textContext = "๋ฒ„ํŠผ";
    buttons.appendChild(el);
    sports.appendChild(el); //nodeList๋Š” ๋ฐ”๋กœ ๋ฐ˜์˜๋˜์ง€ ์•Š์Œ
}

buttons.onClick = onClickHandler; //buttons๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋งˆ์ง€๋ง‰ child์— ์ƒ๊น€

//๋…ธ๋“œ ํŠธ๋ฆฌ์— ๋…ธ๋“œ(์—˜๋ฆฌ๋จผํŠธ)๋ฅผ ์ถ”๊ฐ€/์‚ญ์ œํ•˜๋ฉด HTMLCollection์— ์ถ”๊ฐ€๋˜๊ณ  ๋ฐ”๋กœ ๋ฐ˜์˜๋จ

const el = document.createElementNS(namespace, "div");

<div xmlns:a="https://www.w3.org/TR/html5/" /> //namespace ์—˜๋ฆฌ๋จผํŠธ๊ฐ„์˜ ์ถฉ๋Œ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด URI๋กœ ํ‘œํ˜„

Last updated