在特定位置插入 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

思路如下：

1. 您的 div 需要首先定位，即设置style.position元素的属性。

2. 设置元素的style.top,style.left属性以将元素放置在特定坐标上。

这是工作示例：

function addToCoordinates() {

    var div1 = document.createElement('div');

    var x_pos = '100px', y_pos = '100px';

    div1.id = 'div1';

    div1.style.height = "200px";

    div1.style.width = "200px";

    div1.style.backgroundColor = "#1abc9c";

    div1.style.position = "absolute";

    div1.style.left = x_pos;

    div1.style.top = y_pos;

    document.body.appendChild(div1);

}

<button onclick="addToCoordinates()">Add div on a particular position</button>