0

div を作成し、その中にネストされたスパンを作成することを目的とした次のコードを作成しました。これがコードです。その結果は私を困惑させます：

function(){
    $("<div>", {
    text: "<span>SomeText</span>",
    class: "queryTitle"
}).prependTo(container);

クロムで検査すると、これは結果の html です。

<div class="queryTitle"><span>1234</span></div>

これは私が目指している正確な html ですが、次のように、スパン ブロックがブラウザーで「レンダリングされていない」と表示されるため、この html はブラウザーで適切にレンダリングされません。

<span>1234</span>

（以下のようにコードを書き換えることができることを理解しています

function(){
  $("<div class = " + queryTitle + "><span>1234</span></div>").prependTo(container)
}

これは望ましい結果を返しますが、この構文は少し読みにくいと思います。さらに、教育ドリルとして何が間違っているのかを本当に理解したいと思っています。

読んでくれてありがとう。

4

1 に答える 1

10

このtext関数は、コンテンツを html として扱わない textNode を作成します (span タグをクリア テキストで表示します)。html代わりに使用してください:

function(){
    $("<div>", {
    html: "<span>SomeText</span>",
    'class': "queryTitle"
}).prependTo(container);

編集— わかりやすくするために、コードは次と同等です。

$("<div>")
    .text("<span>SomeText</span>") // creates a textNode and appends it
    .addClass("queryTitle")
    .prependTo(container);

実際に必要な場所:

$("<div>")
    .html("<span>SomeText</span>") // sets innerHTML
    .addClass("queryTitle")
    .prependTo(container);

最初の構文を (ある程度) 説明しているドキュメントは、http: //api.jquery.com/jQuery/#jQuery2にあります。

注: HTML 文字列を JavaScript に入れることは、一般的には悪い考えです。プロジェクトが大きくなるにつれて保守が難しくなるため、これを行うべきではありません。

于 2013-01-11T17:39:54.597 に答える