0

javascriptで順序付けられていないリストを作成しようとしています。私のコードは次のとおりです。

$(div).append("<ul>")
for (i in usersLst){
    $(div).append("<li>")
    $(div).append(usersLst[i][1])
    $(div).append("</li>")
}
$(div).append("</ul>")

その結果は次のとおりです。

•
bob
•
alice
•
fred

ただし、コードが次のようになっている場合：

$(div).append("<ul>")
for (i in usersLst){
    $(div).append("<li>"+usersLst[i][1]+"</li>")
}
$(div).append("</ul>")

その結果は次のとおりです。

 - bob
 - alice
 - fred

したがって、3つの別々の追加を使用すると、改行が不思議に挿入されているように見えます。どうしたの？

4

2 に答える 2

4

このコードを想定します：

$('div')
    .append("<ul>")
    .append("<li>");
    .append('foo');
    .append("</li>")
    .append("</ul>")​​​

結果の構造（Chrome 21）を見てみましょう。

<div>
    <ul></ul>
    <li></li>
    foo
</div>

何が起こった？.append各引数を取り、文字列を適切なDOM要素に変換します。したがって、コードは次のようにするのと同じです。

$('div')
   .append(document.createElement('ul'))
   .append(document.createElement('li'));
   .append(document.createTextNode('foo'));

終了タグを含む2つの呼び出しは、有効なHTML / DOM要素に変換できないため、無視されます。

.append（および他のすべてのDOM操作メソッド）はDOM要素に取り組んでいます。これは、jQueryが.appendChild [MDN]を呼び出す方法にすぎません。

HTMLは、構造を表す特定の形式にすぎません。そこでは、各要素は開始タグと（オプションの）終了タグで表されます。ブラウザはHTMLを解析し、メモリ内にDOMを作成します。DOM（Document Object Model）は、階層的で構造化されたデータと対話するための明確に定義されたインターフェイスです。DOMを使用すると、開始タグと終了タグは存在しなくなり（HTML）、ノードのみが存在します。MDNのDOMについて読むことをお勧めします。

jQueryを使用すると、便利なためHTML文字列を渡すことができます.appendが、各文字列はすぐに対応するDOMノードに変換され、他のノードに追加されます。への複数の呼び出しを含むHTML文字列を作成することはできません.append。

これは、コードの修正バージョンです。

// jQuery parses the HTML string and creates a UL element
var $ul = $('<ul />');
// equivalent to
// var $ul = document.createElement('ul'); <- NOTE: not HTML, it's a node name

for (var i in usersLst) {
    // jQuery parses the HTML, creates a LI element and appends it to the list
    $ul.append('<li>' + usersLst[i][1] + '</li>');
    // equivalent to
    // var li = document.createElement('li');
    // li.appendChild(document.createTextNode(usersLst[i][1]));
    // $ul.appendChild(li);
}

// append the populated UL element to an existing node:
$(div).append($ul);
// equivalent to
// existingElement.appendChild($ul);
于 2012-08-14T20:16:56.850 に答える
1

どちらも正しくありません。最初に文字列全体を作成してから、それをDIVに追加する必要があります。

var ul = '<ul>';
for (i in usersLst){
    ul+='<li>' + usersLst[i][1] + '</li>';
}
ul+='</ul>';

$(div).append(ul)
于 2012-08-14T20:14:49.363 に答える