Javascript 在特定位置插入div

我有一个包含很多div的页面，比如表单填充页面（不是静态固定的，而是动态生成的）

在这里，我需要创建一个新的div，并将其放置在一个特定的[x，y]位置，该位置也不是固定的，但在渲染时会动态变化

所以我的问题是如何使用javascript/jquery将新创建的div放置在特定的[x，y]位置

我试着这样做，但div没有出现：

const showFormFieldErrorMessage = function (data, message) {
    const errorMsg = message || 'This field is required.';
    const errorElem = document.createElement('div');
    errorElem.style.backgroundColor = '#ff0000';
    errorElem.innerHTML = errorMsg;
    errorElem.style.top = `${(data && data.position && data.position.posy) ? data.position.posy : '0'}px`;
    errorElem.style.left = `${(data && data.position && data.position.posx) ? data.position.posx : '0'}px`;
    errorElem.zIndex = 900;
};

注意：参数数据是我在运行时获取位置详细信息的地方

提前谢谢

思路如下：

您的div需要首先定位，即设置元素的

style.position

属性

设置元素的

style.top

，

style.left

属性，以将元素放置在特定坐标上

以下是工作示例：

函数addToCoordinates（）{
var div1=document.createElement（'div'）；
变量x_pos='100px'，y_pos='100px'；
div1.id='div1'；
div1.style.height=“200px”；
div1.style.width=“200px”；
div1.style.backgroundColor=“#1abc9c”；
div1.style.position=“绝对”；
div1.style.left=x_pos；
div1.style.top=y_pos；
文件.正文.附件（第1部分）；
}

---

在特定位置添加div

如果要将新创建的div添加到文档正文，可以使用以下命令：

const showFormFieldErrorMessage = function (data, message) {
    const errorMsg = message || 'This field is required.';
    const errorElem = document.createElement('div');
    errorElem.style.backgroundColor = '#ff0000';
    errorElem.innerHTML = errorMsg;
    errorElem.style.top = `${(data && data.position && data.position.posy) ? data.position.posy : '0'}px`;
    errorElem.style.left = `${(data && data.position && data.position.posx) ? data.position.posx : '0'}px`;
    errorElem.style.position = 'absolute';
    errorElem.zIndex = 900;

    document.body.appendChild(errorElem);
};

您可以使用以下方法将新元素添加到文档正文：

document.body.appendChild(errorElem);

---

注意：确保将您的

errorElem的位置设置为“绝对”，否则顶部和左侧属性将不起作用。
这里有两个问题：

要为
顶部
和
左侧
使用css样式，需要定位元素。我选择的是相对的，但是你可以选择任何一种。引用
top
的MDN文档
top CSS属性参与指定定位元素的垂直位置。它对未定位的图元没有影响。（来源：）

要将元素附加到主体中，可以将其用于JavaScript和jQuery（因为您的问题同时被标记为JavaScript和jQuery）
JavaScript演示


const showFormFieldErrorMessage=函数（数据、消息）{
const errorMsg=message | |“此字段为必填项。”；
const errorElem=document.createElement（'div'）；
errorElem.style.backgroundColor='#ff0000'；
errorElem.innerHTML=errorMsg；
errorElem.style.position=“相对”；
errorElem.style.top=`${（data&&data.position&&data.position.posy）？data.position.posy:'0'}px`；
errorElem.style.left=`${（data&&data.position&&data.position.posx）？data.position.posx:'0'}px`；
errorElem.zIndex=900；
文件.正文.附件（errorElem）；
};
showFormFieldErrorMessage（{position:{posx:150，posy:150}}，“你好，我是一条消息！”）

是否要将div添加到某个容器的div中或直接添加到文档的主体上？您需要将div添加到另一个/container div中或直接添加到文档的主体上
仅创建一个div并赋予它一些属性不会将其添加到DOMI要将其添加到另一个容器的父div中只有答案是气馁。也许再加上一些解释？会帮助别人。