innerHTMLから逃げたい(JavaScript)
wakaru.iconbsahd.icon
……が、うまい書き方がわからない
とりあえず思いついた方法
code:script.js
const parent = document.querySelector("div.example");
{
// あとでまとめて挿入するために配列をつくっておく
const children = [];
// 1要素ずつpushしながら編集していく
children.push(document.createElement("h1"));
children.at(-1).classList.add("sample");
children.at(-1).textContent = "タイトル";
children.push(document.createElement("p"));
children.at(-1).textContent = "本文";
// まとめて挿入
parent.append(...children);
}
要素の中に要素を入れたい場合、どうする……？
div.example > p > bとかやりたいときにどうしようってなる
もしかして：これでいい
code:scrip2.js
const parent = document.querySelector("div.example");
{
const children = [];
children.push(document.createElement("h1"));
children.at(-1).classList.add("sample");
children.at(-1).textContent = "タイトル";
children.push(document.createElement("p"));
{
const children = [];
children.push("ここは通常の文字 ");
children.push(document.createElement("b"));
children.at(-1).textContent = "ここは太字";
parent.append(...children);
}
// まとめて挿入
parent.append(...children);
}
だめだった
code:script3.js
(parent => {
const children = [];
children.push(document.createElement("h1"));
children.at(-1).classList.add("sample");
children.at(-1).textContent = "タイトル";
children.push(document.createElement("p"));
(parent => {
const children = [];
children.push("通常");
children.push(document.createElement("b"));
children.at(-1).textContent = "注目";
parent.append(...children);
})(children.at(-1));
parent.append(...children);
})(document.querySelector("div.example"));
いけそう！！
素直にparentに直接appendしてたbsahd.icon
これ、ちょっと前にちょっとだけ書き方変えたので追加メモします
要素自体の操作も即時関数実行式に入れちゃったほうがきれいな気がしてきた
たしかに都度Element.append()のほうがいいかも
code:script4.js
const rootElement = document.querySelector("div.example");
(parent => {
parent.append(document.createElement("h1"));
(element => {
element.classList.add("sample");
element.textContent = "タイトル";
})(Array.from(parent.children).at(-1));
})(rootElement);
(parent => {
parent.append(document.createElement("p"));
(element => {
element.textContent = "本文";
})(Array.from(parent.children).at(-1));
(parent => {
parent.append(document.createElement("b"));
(element => {
element.textContent = "太字";
})(Array.from(parent.children).at(-1));
})(Array.from(parent.children).at(-1));
})(rootElement);
Array.from(parent.children).at(-1)ではなく要素を普通に変数に入れたほうが使いやすいはずbsahd.icon
どうせなら(P)Reactも...
同意takker.icon
transpilerを一切使わない方針(だと/vim-jp-emojis/esper.iconした。違ったらご指摘ください)なら、htmを使ってJSXっぽいJSを書くのが楽だと思いますtakker.icon transpilerを一切使わない方針←正解！！(Vanilla.js至上主義勢)綾坂こと.icon
code:use-htm.js
// esm.shがCSPに引っかからないweb pageならtranspileなしで動かせる
const html = htm.bind(createElement);
const rootElement = document.querySelector("div.example");
rootElement.append(html`
<h1 class="sample">タイトル</h1>
<p>本文<b>太字</b></p>
`);
JSX的な書き方以外にしたいなら、script.jsの方向性が妥当ですね
code:script-fork.js
// 配列を使うメリットが良くわからなかったので、配列は使ってない
const parent = document.querySelector("div.example");
{
const h1 = document.createElement("h1");
h1.classList.add("sample");
h1.textContent = "タイトル";
const p = document.createElement("p");
p.textContent = "本文";
parent.append(h1, p);
}
code:script-fork2.js
const element = (tag, content, ...classList) => {
const el = document.createElement(tag);
el.classList.add(...classList);
el.textContent = content;
return el;
}
document.querySelector("div.example").append(
element("h1", "タイトル", "sample"),
element("p", "本文"),
);
だいぶ雑に書いているので、入れ子などには対応していない
その後htmを見つけたため、そちらに乗り換えて以来使わなくなった ただ、ここまで書くと、もはやJSXを書くのと大差なくなってくる
JSXの再発明をしているのと変わらない
そういうことで自分もJSXを勧めます