jQueryを使用してHTML（〜= DOM）を構築する

StackOverflow https://stackoverflow.com/questions/805159

  •  03-07-2019
  •  | 
  •  

質問

何か間違ったことをしているかもしれませんが、リストのような基本的なHTML / DOM構造を動的に構築する良い方法を見つけることができませんでした。簡単な例は、json（オブジェクト）のような入力が与えられたテーブル（テーブル要素、行、セル、適切にエスケープされたテキストコンテンツ）の構築です。

問題は、ほとんどの呼び出し（＆quot; .append（）＆quot;、＆quot; .html（）＆quot;、＆quot; .text（）＆quot;など）が直観的に連鎖していないように見えることです（私には）とにかく）方法。たとえば、次のようなことはできません： 

$("#divId").append("<table>").append("<tr>").append("<td>").text("some text");

text（）呼び出しは、メインレベルでコンテンツを消去するようです。また、同じスコープ内に追加するものも同様に追加します。 appennd（）は追加されるコンテンツを返すことを期待しますが、独自のコンテキストを返すようです。

簡単な＆quot; appendText（）＆quot;があることは知っています最後の部分に役立つ拡張機能。しかし、他の人はどうですか？

それが価値があるものについては、今私はDOMに戻ります。 

$("#divId")[0].appendChild(document.createElement("table"))....

しかしそれはかなり冗長です。

だから、私は完全に明らかな何かを見逃していると思っています...しかし何ですか？ append（）以外の呼び出し？

jQueryリファレンスドキュメントを参照してグーグル検索を試みましたが、ほとんどのドキュメントは「すべてを文字列に埋め込む」を使用しています。テキストコンテンツを適切に引用しないなどの問題があります。

（また：いいえ、これは＆quot;の二重ではありません。 JQuery：DOMではなく＆＃8216;メモリ＆＃8217;にHTMLを構築します＆quot;

役に立ちましたか？

解決

これを行うことができます：

$("#divId").append("<table>").append("<tr>").append("<b>").text("some text");

いずれかとして：

$("#divId").append("<table><tr><td><b>some test</b></td></tr></table>");

または

$("<b></b>").text("some text").appendTo("<td></td>").appendTo("<tr></tr>").appendTo("<table></table>").appendTo("#divId");

他のヒント

append を使用できます：

$("#divId").append(
  $("<table/>").append(
    $("<tr/>").append(
      $("<td/>").append(
        $("<b/>").text("some text")
))));

本当に主張する場合は、 appendTo を使用できますが、直感的ではなく、遅くなり、さらにいくつかのキーストロークがかかります：

$("<b/>").text("some text").appendTo(
  $("<td/>").appendTo(
    $("<tr/>").appendTo(
      $("<table/>").appendTo(
        "#divId"
))));

いずれの場合でも、 .text（＆quot; ...＆quot;）を使用して特殊文字をエスケープする（およびXSS攻撃を回避する）ことが重要です。

さらに良い、これらを書くことに飽きたら、本当に jsrender 、 mustache 、 handlebars 、 doT またはその他の多くのjavascriptテンプレートソリューション。これにより、コードをHTML（MVCを考えてください）から切り離しておくことができ、作成しているものがより明確になります。変更もはるかに簡単です。

クイックノート：さらに、 AppendDOM プラグインはタスクを簡素化できるように見えます。

また、jQuery createHtml プラグインを使用して、以下を実行できます。

$("#divId").$table().$tr().$td().$b("some text");

.append（）チェーンを使用すると、HTMLコンテンツと属性を文字列として要素に配置できるので、もう少し便利です。

$("#divId").$table({class: "clean"}).$tr().$td({id: "textId"}).$b("some text");
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top