在JavaScript中使用createElement，如何添加 <p> <span>在里面</span> <div> <span>？</span>

Question

我正在嘗試在句子旁邊創建一個句子，在其中可以將文本拖放到該句子中。

因此，我只想使用javascript創建此HTML標記：

<div>
  <p>Data1<span class = "smallBox droppable"></span></p>
  <p>Data 2<span class="smallBox droppable"></span></p>
</div>

該代碼起作用了，我可以將文本拖放到與“ Data1”和“ Data 2”並排的框中。

到目前為止，我有：

 var data2 = ['one', 'two', 'three'] function dragDrop2(arr) { var length = arr.length; var list = document.createElement("div"); for (var i = 0; i < length; i++) { var paragraph = document.createElement("p"); var spanning = document.createElement("span"); spanning.classList.add("smallBox", "droppable", "draggable"); paragraph.appendChild(document.createTextNode(arr[i])); paragraph.appendChild(spanning); list.appendChild(paragraph); } return list; } document.getElementById("example").appendChild(dragDrop2(data2)); 

 <div id="example"></div> 

現在，鑒於我當前的javascript / html嘗試，拖放部分在框內不起作用，並且我不認為“ span”標簽位於“ p”標簽的下方，因為我的框位於下方每個句子。

如果有人可以幫助我，我將不勝感激！ 另外，我可以做些什么來查看正在創建的標記嗎？ 例如，創建一個警報，該警報將顯示所有html標記，從原始的'div id =“ example” ??開始？ （.html ???）

Answer 1

 var data2 = ['one', 'two', 'three'] function dragDrop2(arr) { var length = arr.length; var list = document.createElement("div"); for (var i = 0; i < length; i++) { var paragraph = document.createElement("p"); var spanning = document.createElement("span"); spanning.classList.add("smallBox", "droppable", "draggable"); spanning.appendChild(document.createTextNode(arr[i])); paragraph.appendChild(spanning); list.appendChild(paragraph); } return list; } document.getElementById("example").appendChild(dragDrop2(data2)); $( "span" ).draggable().droppable(); 

 p { border: 1px solid #000; padding: 20px; } span { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="example"></div> 

我假設您正在使用jquery ui中的draggable和droppable 。

您必須執行的draggable和droppable創作元素后發揮作用。

另一個關鍵點是要改變這一點：

paragraph.appendChild(document.createTextNode(arr[i]));

對此：

spanning.appendChild(document.createTextNode(arr[i]));