問題タブ [html5-template]

カスタム html タグの使用がさまざまな理由で不適切であることは理解していますが、カスタム html タグを使用することを保証する特定の状況を実行したいと考えており、別の方法で、または私の目標を達成するためのより良い方法が得られることを願っています。

私のコード全体を通して、テンプレートとそれに付随する非表示のクラスを含む div タグで構成されるテンプレートと呼ばれるものがあります。これは画面には表示されませんが、基本的にこれらの「テンプレート」タグには、さまざまなアイテムを作成するために Javascript で使用する html が含まれています。これは、HTML でテンプレートのスタイルを設定できるようにするためであり、JavaScript に CSS を混在させることを心配する必要はありません。

JavaScriptでは、次のようなことをします

むしろこういうことができればいいのに

そのため、単一の div に複数のテンプレートがある場合、一意のクラス名を付けるのではなく、それらすべてを取得できます。もちろん、実装が必要な理由はこれよりもはるかに深くなりますが、詳細に時間を無駄にする必要はありません。私のJavascript ALOTをクリーンアップするのに役立つとだけ言っておきましょう.

カスタム テンプレート タグは非表示であり、実際には、javascript 内で document.getElementsByTagName("template"); を使用して呼び出すのに便利なコンテナーに過ぎないためです。これは大丈夫ですか？テンプレートがhtmlに実装された場合に備えて、タグにカスタム名をプレフィックスとして付けます。

<template>HTMLソースでタグを使用しようとしているこの状況があります：

これにより、最終的にテンプレートがドキュメントに配置されますが、DOM にあるとは見なされません。これは、テンプレート タグをサポートするブラウザーで $("#content-container") が見つからないことを意味します。私が検索した場合：

私はこれを取り戻します：

これのどれも私を驚かせません。方法を知る必要があるのは、ドキュメント フラグメントのコンテンツを複製し、必要な場所で DOM に貼り付けることができる新しいノードを作成することです。

jQueryを使わずにこれを行う方法の例を見つけましたが、このようなコードの多くはすでにjQueryを使用しており、jQueryを使用してこれを行う方法を知る必要があります.

私が最初に考えたのは、html を取得し、それを使用して新しいノードを作成することでした。

これにより、次のエラーが発生します。

エラーが口ひげの構文によるものかどうかはわかりません。この動作のどこかにjQueryソリューションが必要だと思いますが、Googleで検索すると、jQueryテンプレートのヒットが大量に表示されますが、これは異なります。

これを解決するのに役立つサイト/ページへの考え、回答、またはポインタを持っている人はいますか? 私はハック的なものを一緒にまとめるのを避けようとしています。

編集:私はこの解決策を見つけました(解決策であることを確認するためにまだテストしていますが、有望に見えます);

以前は本当に必要ではなかった div を含むことになりますが、それを受け入れることができます。でも、こういうのはダサく感じる。誰もこれに対するより良いアプローチを持っていますか? 利点は、テンプレート タグの動作をまだ完全に適応させていないブラウザーでも機能することです。

ありがとう！