Element.appendした後thisを返り値にするにはどうすればいいか

タイトルの通りです。
※行頭にあるのは行番号ですのであしからず。

js
1console.log(document.createElement("div").append(document.createElement("span")));

を実行するとundefinedと返りますが、これを<div><span></span></div>と返る（型はもちろんElement）ようにしたいです。

js
1Element.prototype.addNodes = function(...nodes) {
2  this.append(...nodes);
3  return this;
4}

としてaddNodesを呼び出せば返り値にできますが、addNodesとかでなくappendを直接上書きして使いたいというワガママな考えを持っておりまして。
なにをしたいかというと、

js
1Element.prototype.append = function(...nodes) {
2  this.nodeList.push(...nodes);
3  return this;
4}

みたいに迂回（？）して追加させれば元のappendと同じように使えるのかなと。
もちろんnodeListは読み取り専用なので要素を追加することはできませんが、
これをどうにかして追加できないかという次第です。

ちなみに、

js
1Element.prototype.append = function(...nodes) {
2  for(let i = 0; i < nodes.length; i++) {
3    this.innerHTML += nodes[i].outerHTML;
4  }
5  return this;
6}

とすれば確かに要素は追加できますが、innerHTMLはDOMを再構築するため、this内にあらかじめ付与したイベントリスナーが削除されてしまうという欠点を持っているのでこの方法以外でお願いしたいです。

なぜこんなことをしたいかというと要素作成関連を一行にまとめるためにappendを入れ子で使えるようにしたいからなんですよね。

js
1document.createElement("div").append( // apend(undefined)となる
2  document.createElement("div").append( // 返り値がないためここでundefined
3    document.createElement("span")
4  )
5)

とすると、1行目でundefinedをappendできませんよというエラーがでます。

行動規範の内容に同意します

回答1件

ベストアンサー

オリジナルの append() を保存したり、

js
1const originalElementAppend = Element.prototype.append;
2Element.prototype.append = function(...nodes) {
3  originalElementAppend.call(this, ...nodes);
4  return this;
5};

append()の処理を再実装したり

js
1Element.prototype.append = function(...nodes) {
2  for (let src of nodes) {
3    if (src instanceof Node) {
4      this.appendChild(src);
5    } else {
6      this.appendChild(this.ownerDocument.createTextNode(src));
7    }
8  }
9  return this;
10};