JavaScriptで、開発ツールで追加すると平気なのに、.append() ではエラーになる

Question

###実現したいこと
JavaScriptのライブラリ「md-color-picker」というカラーピッカーを、.append()によって追加したいです。

「使い方紹介ブログ」

https://pisuke-code.com/jquery-how-to-use-md-color-picker/

「公式github」

https://github.com/BennyAlex/material-design-inspired-color-picker

「公式デモ」

https://bennyalex.github.io/material-design-inspired-color-picker/

###該当のソースコード
こちらのhtmlPickerは、上記の「使い方紹介ブログ」の掲載HTMLで、.append()でエラーとなります。

var htmlPicker = `<md-color-picker id="colorPicker" color-margin="6" colors-per-row="5" color-size="40" default-tint="500" fixedMinHeight="true" palette="material-full" use-spectrum-picker="true" value="#2196f3"><md-color-picker>`;  
$('body').prepend(picker);

###発生している問題・エラーメッセージ
エラーをコピペするとこうなります。
要はこのライブラリの下記に問題があるらしいのですが、高度なライブラリで解読できません。
「エラーの行数」でなく「render」とか「it」という表記の意味も不明です。

TypeError: e.value is undefined
    render http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    it http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    render http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    _render http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    r http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    get http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    po http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    we http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    $mount http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    init http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    l http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    c http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    ma http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    _update http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    r http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    get http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    po http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    we http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    $mount http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    _init http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    Ct http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    or http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    connectedCallback http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    n http://example.com/wp-content/themes/testTheme/js/md-color-picker.js?ver=1.7.2:1
    jQuery 3
    <anonymous> debugger eval code:2

###試したこと
上記ソースコードのhtmlPickerは「使い方紹介ブログ」のHTMLですが、下記のように「公式github」のUsageのシンプルなHTMLでも同様エラーでした。

var htmlPicker = `<md-color-picker></md-color-picker>`;  
$('body').prepend(htmlPicker);

また.append()でなく.prepend()も同様でした。

そして、開発ツールの「HTMLとして編集」の機能で、上記htmlPickerを入れると普通に作動しました。

さらに追加で、JavaScriptからでなく、普通にHTMLベタ書きでもエラーでした。

###ツールのバージョン
jQuery3.4.1で、ライブラリは1.7.2です。
あと関係ないとは思いますがWordPressです。

ボタンクリックで指定HTMLの内部にこのカラーピッカーを追加したいので、どうしても.append()での追加が必要だと考えているのですが、どうすればできるでしょうか？

###補足
上記エラーの再現サンプルになります。
宜しくお願い致します。
https://jsfiddle.net/t804c9sw/

Comments

[cerfweb]

プラグインは間違いなく読み込まれていますか。

[gpsoft]

↓これだと、どうですか?
$('body').append('<md-color-picker value="#2196f3"></md-color-picker>');

value属性は必須のような気がします。
value属性を削除すると、私の環境でも、同じエラーが発生しました。

[con_con]

cerfwebさん、開発ツールの「HTMLとして編集」の機能で、上記htmlPickerを入れると普通に作動しました。なので読み込まれています。

[con_con]

gpsoftさん、該当のソースコードにもvalue属性はございますし、value属性だけにしても同様のエラーでした。

[gpsoft]

私のコードをコピペしてもダメだったとなると、環境依存って感じですね。
value属性が必須という仮説も、公式サイトの説明と食い違うので、我ながら半信半疑でした。

ちなみに、「該当のソースコード」に掲載してるコードには誤記があるので注意してください。
・閉じタグの / が漏れてる
・変数名が噛み合ってない(htmlPickerとpicker)
まぁ、これが原因とも思えないんですけど、念のため。

[con_con]

>閉じタグの / が漏れてる

これが原因でした…

なるほど開発ツールの「HTMLとして編集」の機能で平気だったのは、この機能を介すと勝手に閉じタグを補ってくれるからということだったわけですね。こんな初歩とは気づかず苦労しました…

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

[con_con]

もしよかったらご回答に書いてください。ベストアンサーにさせていただきます。

[gpsoft]

じゃぁ、やっぱりvalue属性は必須なのかな。

[gpsoft]

自己解決にして、閉じていただいて構いませんよ。
お気づかい、ありがとうございます。

[con_con]

ですね。valueを抜かすとおっしゃる通りエラーでした。
解決の件かしこまりました。丁寧なご返信ありがとうございます。

Answer 1

質問文の「該当のソースコード」には閉じタグがなく、これによって生じるエラーでした。

また「試したこと」には閉じタグがありますが、こちらはvalue属性がなくその場合もエラーとなるようです。

いずれも「質問への追記・修正の依頼」での、gpsoftさんからのご指摘によるものです。

ご回答ありがとうございました。