Insert a div at a particular position

user_14093477 0
Viewed 976

I have a page with lots of divs, like a form filling page (not statically fixed but generated dynamically).

Here I need to create a new div and place it in a particular [x,y] position which is also not fixed but will get dynamically while rendering.

So my question is how to place a newly created div in a particular [x,y] position using javascript/jquery?

I am trying like this but the div is not appearing:

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;
};

NOTE: The parameter data is where I get the position details in runtime.

Thanks in advance!!

css html jquery javascript
3 Answers

If you want to add your newly created div to document's body following can be used:

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);
};

You can add new element to document's body using:

document.body.appendChild(errorElem);

Note: Make sure to make the position 'absolute' of your errorElem otherwise the top and left properties won't work.

user_49890540

Ideas are as follows:

  1. Your div needs to be positioned first i.e set the style.position property of the element.
  2. Set the style.top, style.left properties of the element to place the element on a specific coordinate.

Here is the working example:

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>

user_61742710

There are two problems here:

  1. In order to use css styles for top and left, you need to have the element be positioned. I'm going with relative, but you can choose any. To quote the MDN documentation for top...

The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements. (Source: MDN Web Docs: top.)

  1. To append the element to the body, you can use document.body.appendChild() for JavaScript and append() for jQuery (since your question is tagged both JavaScript and jQuery).

JavaScript Demo

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 Demo

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>

user_24305490
Related