在特定位置插入 div

Question

我有一个包含很多 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;

};

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

提前致谢！！

Answer 1

如果您想将新创建的 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否则顶部和左侧属性将不起作用。

Answer 2

思路如下：您的 div 需要首先定位，即设置style.position元素的属性。设置元素的style.top,style.left属性以将元素放置在特定坐标上。这是工作示例：function addToCoordinates() {&nbsp; &nbsp; var div1 = document.createElement('div');&nbsp; &nbsp; var x_pos = '100px', y_pos = '100px';&nbsp; &nbsp; div1.id = 'div1';&nbsp; &nbsp; div1.style.height = "200px";&nbsp; &nbsp; div1.style.width = "200px";&nbsp; &nbsp; div1.style.backgroundColor = "#1abc9c";&nbsp; &nbsp; div1.style.position = "absolute";&nbsp; &nbsp; div1.style.left = x_pos;&nbsp; &nbsp; div1.style.top = y_pos;&nbsp; &nbsp; document.body.appendChild(div1);}<button onclick="addToCoordinates()">Add div on a particular position</button>