__proto__へ値を代入したい

Question

前提・実現したいこと

let input = document.createElement(“input”);
input.type = “radio”;
input.name=“radio”;
/*以下input.○○が続く*/

htmlへの要素追加について、
現在、上記のように値を代入しているのですが、どうしても見づらくなってしまうと感じている為、これを変数ごとに1つにまとめる手法はないかと思い質問させて頂きました。

発生している問題・エラーメッセージ

input ={
 type : “radio”,
 name : “radio”,
/*続く*/
}

のように宣言してみたのですが、変数に代入はできるものの__proto__とprototypeの違いにより、appendChild(input)の部分でエラーが出てしまいます。

let list = document.getElementById("listA");
list.appendChild(input);
/*エラーメッセージ*/
/*VM11904:2 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at <anonymous>:2:10
(anonymous) @ VM11904:2*/

該当のソースコード

let input = document.createElement(“input”);
/*現在のソースコード*/
/*1つ1つ記入していくと見づらくなる*/
input.type = “radio”;
input.name=“radio”;
input.className="radioA";
/**/
/*理想形*/
/*下記のように1つにまとめたい*/
input={
 type :"radio",
 name :"radio",
 className :"lradioA"
}
/**/
let list = document.getElementById("listA");
list.appendChild(input);

試したこと

prototypeと__proto__の違いが原因でエラーが出ているところまでは分かったのですが、__proto__に値を代入する方法が調べてもわからなかったです。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

・参考資料
JavaScript 要素を追加/削除する(createElement他)/ITSakura Blog for business and development
https://itsakura.com/js-createelement

Answer 1

prototypeとprotoの違いが原因でエラーが出ているところまでは分かったのですが、

DOMツリーに足せるのはdocument.createElement() などDOMノードとして作成したオブジェクトだけです。プロトタイプを調整しても無理だと思います。document.createElement()をなくすことはできません。

Object.assign()などと組み合わせて、さらに関数化しておけば簡潔に書けるのではないでしょうか。

function createElementWithProps(factory, tagName, props) {
  return Object.assign(factory.createElement(tagName), props);
}

let input = createElementWithProps(document, 'input', {
    type :"radio",
    name :"radio",
    className :"lradioA"
}));

Comments

[shunsaku2004]

int32_tさん

稚拙な質問ながらご回答いただきありがとうございます。
assignがまさに求めていた内容でした。

今回、悩みを解決できた中で一番回答の早かった方へのベストアンサーとなったので選ぶことはできませんでしたが、とても勉強になりました！
ありがとうございました！

Answer 2

Object.assignを使うのが妥当かと思います。

let input = document.createElement("input");
Object.assign(input, {
 type :"radio",
 name :"radio",
 className :"lradioA"
})

let list = document.getElementById("listA");
list.appendChild(input);

「__proto__を書き換える」ということをやると、DOMオブジェクトでなくなってしまいます。HTMLに投入するエレメントには使えない技です。

Comments

[shunsaku2004]

maisumakunさん
ありがとうございます！
まさに回答いただいた内容をもとめていました！
稚拙な質問ながらご対応いただきありがとうございます。

他の方の回答もものすごく役に立つ内容であるのですが、求めていた内容の回答の中で一番回答の時間が早かったのでベストアンサーにさせていただきます。

ありがとうございました！

Answer 3

ご希望の動作が今一つわからないのですが、これのことですか？

Object.setPrototypeOf() - JavaScript | MDN