如何用JavaScript的createElement嵌套元素并修复拖放功能问题？

我来帮你逐个搞定这三个问题：

1. 让Span和文本在同一行显示 #

你说Span跑到文本下方，这几乎肯定是CSS样式的锅。<span>默认是行内元素，本该和文本并排，但如果你的.smallBox没设置合适的显示模式，就会换行。给这个类加个基础样式就行：

.smallBox {
  display: inline-block; /* 关键：让元素保持行内但能设置宽高 */
  width: 40px;
  height: 20px;
  border: 1px solid #999;
  margin-left: 10px; /* 给文本和Span留点空隙，看着更舒服 */
}

这样Span就会乖乖待在P标签内的文本旁边了。

2. 修复拖放功能失效的问题 #

你的代码里给Span加了draggable类，但拖放功能不是靠类名触发的——得绑定对应的事件，还要区分可拖动元素和可放置区域：

• 如果你的Span是可放置的目标区域（对应你写的droppable），必须给它绑定dragover和drop事件，并且阻止默认行为，否则浏览器会拒绝接收拖放内容。
• 如果你的Span是可拖动的元素，要设置它的draggable属性为true（这是HTML属性，不是类名！你之前加的draggable类没用），还要绑定dragstart事件传递拖动数据。

给你个完整的可运行示例，假设Span是可放置区域：

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");
    
    // 给可放置区域绑定核心事件
    spanning.addEventListener('dragover', function(e) {
      e.preventDefault(); // 必须阻止默认，否则drop事件不会触发
    });
    spanning.addEventListener('drop', function(e) {
      e.preventDefault();
      // 这里处理拖放后的逻辑，比如把拖动的内容放到Span里
      var draggedText = e.dataTransfer.getData('text');
      this.textContent = draggedText;
    });

    paragraph.appendChild(document.createTextNode(arr[i]));
    paragraph.appendChild(spanning);
    list.appendChild(paragraph);
  }
  return list;
}

// 顺便加个可拖动的测试元素（你可以换成自己的元素）
var testDragItem = document.createElement('div');
testDragItem.textContent = '拖我试试';
testDragItem.draggable = true;
testDragItem.style.padding = '8px';
testDragItem.style.border = '1px solid blue';
testDragItem.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text', this.textContent);
});
document.body.appendChild(testDragItem);

// 渲染到页面
document.getElementById("example").appendChild(dragDrop2(data2));

这样拖放功能就能正常工作了。

3. 弹窗展示生成的HTML结构 #

要查看example div的完整HTML，直接用innerHTML获取，然后弹窗展示就行。如果想让结构更清晰，可以格式化后再显示：

// 确保元素已经渲染完成后再获取
setTimeout(() => {
  var targetHTML = document.getElementById('example').innerHTML;
  // 转义HTML标签，避免弹窗里直接解析成元素
  var escapedHTML = targetHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;');
  // 用弹窗打开，用pre标签保持格式
  var popupWindow = window.open('', 'Generated HTML', 'width=600,height=450');
  popupWindow.document.write('<pre style="white-space: pre-wrap;">' + escapedHTML + '</pre>');
  popupWindow.document.close();
}, 0);

如果嫌弹窗麻烦，直接在控制台打印document.getElementById('example').innerHTML也能看到结构，更方便调试。

内容的提问来源于stack exchange，提问作者sGlow