JavaScript appendchildしたら外部ファイルが動かない

Question

前提・実現したいこと

jscolorというものを使っています
動かし方は簡単で、下記を記述することによって動きます

これのbuttonなどをappendして動かしたいと思い、1を記述したところ動かなくなりました
下記と同じ状態を生成してるはずなのに、動かないのはなぜでしょうか？

長すぎる為リンク記載
外部ファイル jscolor.jsの内容

<script src="jscolor.js"></script> <button onclick="document.getElementById('foo').jscolor.show()"> Show Picker</button> <input id="foo" data-jscolor="{}" value="cc4499">

該当のソースコード

1
<script src="jscolor.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
input = document.createElement ("input");
input.type="text";
input.id="foo";
input.value="cc4499";
input.setAttribute("data-jscolor", "{}");
input.style.width="300px";
input.style.height="50px";
document.body.appendChild (input);

input = document.createElement ("input");
input.type="button";
input.value="Show Picker";
input.style.width="300px";
input.style.height="50px";
input.addEventListener('click', function() {
document.getElementById('foo').jscolor.show();
});
document.body.appendChild (input);
});
</script>

Answer 1

jscolorがdomを評価するタイミングの問題かもしれませんね
windowのDOMContentLoadedを待ってくれていないようです

あまりおすすめしませんが、どうしてもjsでの処理がマストなら

<script>
document.write(`<input type="text" id="foo" data-jscolor="{}" value="cc4499" style="width:300px;height:50px">`);
</script>

Comments

[rtyw]

おお、、すごい
動きました
document.writeは今後使えなくなる（非推奨）だからおすすめしないという理由でしょうか？

[rtyw]

もしほかのやり方での方法を思い付く方も、ぜひ教えてください
よろしくお願いいたします

[rtyw]

あまりわかってませんが、
＞windowのDOMContentLoadedを待ってくれていないようです

下記の形式にして読込タイミングをずらすことは解決策にはなりませんよね？
動かないということは解決策にあてはまらないということですよね。。

var script = document.createElement('script');
script.src = "jscolor.js";
setTimeout("document.body.appendChild(script)",1000);

Answer 2

追記
やらかしました。この回答は完全にやらかしです。ごめんなさい。
先に正しい動作を確認するためのコードを貼り付けた後、
<input id="foo" data-jscolor="{}" value="cc4499">
こちらの要素を無効にせずにbutton側のコードだけ弄ってカラーピッカーが出たため、
「動くようになった」と誤認しました。お馬鹿さんです。申し訳ございません。

以下勘違いによる回答なので、参考にしないようにご注意ください

buttonの方がinputタグになってるからじゃないかなぁと。
buttonに変えたら動きましたよ？全く同じとはいかなかったけども。
scriptは要素を取得してそこに変更を加えているから、
置き換えたいのであれば「完全に同じ状態」にしないと同じようには動かないかな。

Comments

[rtyw]

ご指摘ありがとうございます
＞buttonの方がinputタグになってるからじゃないかなぁと。
buttonに変えたら動きましたよ？全く同じとはいかなかったけども。

buttonに変えるというのは、下記という意味でしょうか
下記に変えても動きませんでした

input = document.createElement ("button");
input.value="Show Picker";
input.style.width="300px";
input.style.height="50px";

[退会済みユーザー]

rtyw様
ごめんなさい。完全に勘違いです。
検証する際に確認のために貼り付けた<input id="foo" data-jscolor="{}" value="cc4499">
こちらを無効にし忘れておりました。
再度確認したところ上記のタグが生きている場合inputでボタンのDOMを生成しても動きました。
誤った情報を伝えたために無駄なお時間をいただいてしまい申し訳ございませんでした。

[rtyw]

了解いたしました
お気になさらないようお願いいたします