javascript - 在 JavaScript 中使用 createElement，如何在 中添加 和 ？

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]));