1

LI 内に UL を追加しようとしています。次のような HTML ツリーがあります。

<li id="node0"><a href="#" onclick="Collapse(event)"><img src="file:///C:/drag-drop-folder-tree/images/dhtmlgoodies_minus.gif"></a>All My Windows
<ul style="display: block;" id="tree_ul_0">
<li id="node0" ondragenter="return dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)" ondragstart="drag(event)" draggable="True"><a href="#">9:00-9:30 moving up</a></li>
<li id="node1" ondragenter="return dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)" ondragstart="drag(event)" draggable="True"><a href="#">9:00-9:30 moving down</a>

Javascript を使用して、上部の LI node0 の子になる新しい UL を追加しようとしています。

これが私のコードです：

 var newul = document.createElement("ul");


 var ulist = document.getElementById("node0");
 var newItem = document.createElement("li");

 newItem.innerHTML = "<ul id='item1'><li id='Item0' ondragenter='return dragEnter(event)' ondragover='allowDrop(event)' ondrop='drop(event)' ondragstart='drag(event)' draggable='True'><a onclick='Collapse(event)' href='#'><img src='dhtmlgoodies_minus.gif'></a><text>hello</text></li></ul>"

 ulist.appendChild(newItem);

このコードを実行すると、次のようになります。

<li>
<ul id="item1">
<li id="Item0" ondragenter="return dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)" ondragstart="drag(event)" draggable="True"><a onclick="Collapse(event)" href="#"><img src="dhtmlgoodies_minus.gif"></a><text>hello</text>
</li>
</ul>
</li>

したがって、新しいものを追加します：

<LI>

これは node0 の子です

item1 UL を node0 の子にしたいと考えています。不要な LI を取得せずに UL を追加する方法を教えてください。

4

1 に答える 1

0

あなたはそれを過度に複雑にしました。すでにノードを取得しており、その innerHTML を設定するだけです。

var ulist = document.getElementById("node0");

ulist.innerHTML = "<ul id='item1'><li id='Item0' ondragenter='return dragEnter(event)' ondragover='allowDrop(event)' ondrop='drop(event)' ondragstart='drag(event)' draggable='True'><a onclick='Collapse(event)' href='#'><img src='dhtmlgoodies_minus.gif'></a><text>hello</text></li></ul>";

または、その中に ul と li を作成して追加することもできますが、適切な要素である ul をノードに追加する必要があります。それは簡単に大量のコードになる可能性があります。以下のスニペットは、すべてのイベントを設定することさえせずa、ノード内に要素を作成しません。

var ulist = document.getElementById("node0");

// Create the new ul.
var newul = document.createElement("ul");
newul.id = 'item1';

// Create the new li
var newItem = document.createElement("li");
newitem.id = 'Item0';
newitem.ondragenter = dragEnter;
// ... and so on
newitem.setAttribute('draggable', true);

// Append the li to the ul
newul.appendChild(newItem);
// And append the ul to the parent li.
ulist.appendChild(newul);

あなたの現在の状況では、両方を混ぜ合わせました。ul決して使用されない新しい を作成します。次に、新しい を作成しますli。次に、その innerHTML をli必要な HTML チャンク全体に設定し、それを親に追加します。liドキュメントで取得するのは、newitemコードで作成したものです。

于 2016-04-27T00:07:56.440 に答える