logo标签列表

在特定位置插入一个div

javascripthtmljquerycss
3

我有一个页面，其中有许多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 添加到某个容器的 div 中还是直接添加到文档的 body 中？ - Zaki Mohammed
你需要将你的div添加到另一个/容器div内部，或直接添加到文档body中。仅创建div并为其设置一些属性并不会将其添加到DOM中。 - freedomn-m
我想将它添加到另一个容器父div中。 - tajasvi ag
3个回答
2
如果您想将新创建的 div 添加到文档的 body 中，可以使用以下方法：
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位置设为“absolute”，否则顶部和左侧属性将无法工作。
1
以下是想法：
  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>

仅提供代码答案是不鼓励的。也许可以添加一些解释？这将有助于其他人。 - HoldOffHunger
1
这里有两个问题：
1. 为了使用 top 和 left 的 CSS 样式，你需要将元素定位。我选择使用 relative，但你可以选择任何一种。引用 MDN 对 top 的文档...

top CSS 属性参与指定定位元素的垂直位置。它对非定位元素没有影响。（来源：MDN Web Docs: top。）

2. 要将元素附加到 body 上，你可以使用 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接