在特定位置插入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添加到文档的正文中，可以使用以下内容：

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的位置为"绝对"，否则顶部和左侧的属性将不起作用。

这里有两个问题：

为了对top和left使用css样式，需要对元素进行定位。我选择relative，但你可以任意选择。引用top的MDN文档

top CSS属性参与指定已定位元素的垂直位置。它对未定位的元素没有影响。(来源：MDN Web文档：顶部。(

要将元素附加到正文，您可以对JavaScript使用document.body.appendChild()，对jQuery使用append()(因为您的问题同时标记了JavaScript和jQuery(

JavaScript演示

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.position = "relative";
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;
document.body.appendChild(errorElem);
};
showFormFieldErrorMessage({position:{posx:150, posy:150}}, "hello, I'm a message!");

<html><head></head>
<body></body>
</html>

jQuery演示

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.position = "relative";
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;
$(document.body).append(errorElem);
};
showFormFieldErrorMessage({position:{posx:150, posy:150}}, "hello, I'm a message!");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html><head></head>
<body></body>
</html>

想法如下：

您的div需要首先定位，即设置元素的style.position属性
设置图元的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>

相关内容

最新更新

热门标签：