已追加的p元素未显示在div元素中，如何解决？能否让div可拖拽？

一、修复p元素未显示的问题 #

你的代码核心错误是追加p元素的方式有误：document.body.base.append(baseHeading);这行写法不对，document.body并没有名为base的属性，直接用你创建的base变量调用append()方法即可。

修正后的完整代码：

// 创建并配置div元素
const base = document.createElement('div');
document.body.append(base);
base.style.width = '100px';
base.style.height = '150px';
base.style.backgroundColor = 'black';
base.style.color = 'white';
base.style.opacity = '0.8';
base.style.borderRadius = '5px';
base.style.fontFamily = 'arial';

// 创建并追加p元素到div中
const baseHeading = document.createElement('p');
base.append(baseHeading); // 此处为修正关键
baseHeading.innerText = 'Controid';

额外建议用const声明变量，避免全局变量污染。

二、为div添加拖拽功能 #

要实现拖拽，需要监听三个鼠标事件：mousedown（按下鼠标时记录初始位置）、mousemove（拖动时更新元素位置）、mouseup（松开鼠标时停止监听拖动），同时要给div设置position: absolute或fixed，让它可以自由定位。

完整带拖拽功能的代码：

const base = document.createElement('div');
document.body.append(base);

// 基础样式配置
base.style.width = '100px';
base.style.height = '150px';
base.style.backgroundColor = 'black';
base.style.color = 'white';
base.style.opacity = '0.8';
base.style.borderRadius = '5px';
base.style.fontFamily = 'arial';
base.style.position = 'absolute'; // 必须设置定位才能拖拽
base.style.cursor = 'move'; // 鼠标样式改为拖动指针

// 创建并追加p元素
const baseHeading = document.createElement('p');
base.append(baseHeading);
baseHeading.innerText = 'Controid';
baseHeading.style.margin = '10px'; // 给p加边距避免贴边

// 拖拽逻辑
let isDragging = false;
let startX, startY, offsetX, offsetY;

base.addEventListener('mousedown', (e) => {
  isDragging = true;
  // 记录鼠标按下时的位置和元素当前偏移量
  startX = e.clientX;
  startY = e.clientY;
  offsetX = base.offsetLeft;
  offsetY = base.offsetTop;
  // 拖动时的样式变化（可选）
  base.style.opacity = '0.6';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  // 计算元素新位置
  const newX = offsetX + (e.clientX - startX);
  const newY = offsetY + (e.clientY - startY);
  // 更新元素定位
  base.style.left = `${newX}px`;
  base.style.top = `${newY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  // 恢复原样式（可选）
  base.style.opacity = '0.8';
});

拖拽逻辑说明 #

• mousedown：标记拖拽开始状态，记录鼠标初始位置和元素当前偏移量，保证位置计算准确。
• mousemove：处于拖拽状态时，实时计算元素新位置并更新left和top样式。
• mouseup：结束拖拽状态，恢复元素原有样式。

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