コンテンツにスキップ

利用者:Ef3/Vanilla JS

出典: フリー教科書『ウィキブックス(Wikibooks)』
function Elm(name, attributes = {}, children = []) {
  let elm = document.createElement(name);
  Object.assign(elm, attributes);
  children.forEach(child => elm.appendChild(child));
  return elm;
}

function Text(nodeValue) {
  return document.createTextNode(nodeValue);
}

const message = "Hello Vanilla JS",
  input = Elm("input", {
    "value": message
  }),
  text = Text(message),
  view = Elm("div", {
    "class": "block"
  }, [
    input,
    Elm("p", {}, [text])
  ]),
  handller = e => text.nodeValue = input.value;
input.addEventListener("keyup", handller);
input.addEventListener("keydown", handller);
document.body.appendChild(view);