innerHTMLを使用しないで<div>要素生成

Question

今回の悩み

このコード内のinnerHTML内にHTMLを直接書き込む以外の方法があれば教えていただきたいです。
createElementを使用するのかなとも思ったんですが、classやstyleの作り方が分かりません。

変更前

var add = () => {


    let add_ele = document.getElementById("Noname_card");

    const div_element = document.createElement("div");
    
    div_element.innerHTML = `<div class="card">
    <div class="no_name">
        <span style="display: none;"></span>
    </div>
    <div class="name">
        <p>　タスク</p>
    </div>
    <div class="button is-primary">削除</div>
</div>`;

    let child = div_element.children[0];
    let cchild = child.children[2];

    cchild.onclick = del;

    add_ele.appendChild(div_element.childNodes[0]);
 

}

Answer 1

classやstyleの作り方

let add_ele = document.getElementById("Noname_card");

let element = document.createElement('div');
element.style.display = 'none';
element.classList.add('card');

add_ele.appendChild(element);

Comments

[united.reds.30]

回答ありがとうございます。display='none'はなるべく使わないようにしたいです。

[退会済みユーザー]

> display='none'はなるべく使わないようにしたいです。
どういう意味ですか？

Answer 2

classやstyleの作り方が分かりません。

クラスは classList で。styleはcchild.style= '/*なんらかのスタイル指定*/';で出来ませんか？

【Element.classList - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/classList

【Element.setAttribute() - Web APIs | MDN】
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Answer 3

前回の質問に動作するソースつけてありますが
それではだめなのでしょうか？
何がどうだめだったのかを提示しない限り問題解決につながらないでしょう

ヒアドキュメントで書いたdivをinnerHTML以外でDOM化するのは微妙。
おそらくできてもinnerHTMLで処理したものと動作的にかわらないと
思いますよ

Comments

[united.reds.30]

前回のソースから動くようにはなったのですが、指導してくれる方からinnerHTMLを使わずに書いてみてと言われたので質問しました。

Answer 4

createElementを使用するのかなとも思ったんですが

はい。合ってます。
classの操作：Element.classList

styleの操作：element.setAttribute

classもstyleもそうですが、HTMLタグからすると「属性」です。
「属性の操作」というのがキーワードです。

※私が提示しているようなMDNのドキュメントを確認してください。このドキュメントを使えるようになると自己解決で済むようになります

Comments

[kei344]

> MDN
日本語版は更新が遅かったりするので、入門書とかのほうが最初はいいような気がします。
（element.setAttribute の例文に「 d.setAttribute("align", "center"); 」と書いてある化石っぷり）

[m.ts10806]

気づかなかった・・確かにその例は良くないですね。
使い方とか仕様だけ伝われば良いと思って気にしてませんでした。

あとで気づきましたが、日本語版は”e”lementになってますね。
日本語話者が多いことも含めてなるべく日本語版提示するようにしてたのですが、
そのあたり考えて提示しないといけないかもしれません。ありがとうございました。

[united.reds.30]

回答ありがとうございます。ドキュメントでの理解が毎回足りず質問してしまいます。

[m.ts10806]

＞ドキュメントでの理解が毎回足りず質問してしまいます。
では、そのあたりをきちんと提示されたほうが良いかと思います。
https://teratail.com/help/question-tips#questionTips1-2
[検索して見つけたページでわからない事があれば、どのページのどの部分がわからないのかを明確に記し質問してみてください。]

結局のところ前と同じく「まず（コードを）書いてみましょう」となります。
書かれていない段階で「方法」を聞かれたら今回のような回答になるのは自然な流れと思います。

[united.reds.30]

回答ありがとうございます。どこまで分からないかを明確にしていきたいと思います。