Вставить div в определенную позицию

ProgramBox

Вставить div в определенную позицию

Post author:admin
Запись опубликована:13 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть страница с большим количеством разделов, например, страница заполнения формы (не статически фиксированная, а генерируемая динамически).

Здесь мне нужно создать новый div и поместить его в определенную позицию [x, y], которая также не фиксирована, но будет динамически изменяться при рендеринге.

Итак, мой вопрос в том, как поместить вновь созданный div в определенную позицию [x, y] с помощью javascript / jquery?

Я пытаюсь так, но 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 amp;amp; data.position amp;amp; data.position.posy) ? data.position.posy : '0'}px`;
    errorElem.style.left = `${(data amp;amp; data.position amp;amp; data.position.posx) ? data.position.posx : '0'}px`;
    errorElem.zIndex = 900;
};

ПРИМЕЧАНИЕ: данные параметров — это то, где я получаю информацию о позиции во время выполнения.

Заранее спасибо!!

1. Вы хотите добавить свой div внутри div какого-либо контейнера или непосредственно в тело документа?

2. Вам нужно добавить свой div внутри другого / container div или непосредственно в документ body — простое создание div и присвоение ему некоторых свойств не добавляет его в DOM

3. Я хочу добавить его в другой родительский div контейнера

Ответ №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 amp;amp; data.position amp;amp; data.position.posy) ? data.position.posy : '0'}px`;
    errorElem.style.left = `${(data amp;amp; data.position amp;amp; data.position.posx) ? data.position.posx : '0'}px`;
    errorElem.style.position = 'absolute';
    errorElem.zIndex = 900;

    document.body.appendChild(errorElem);
};

Вы можете добавить новый элемент в тело документа, используя:

 document.body.appendChild(errorElem);

Примечание: Убедитесь, что ваша позиция ‘absolute’ errorElem , иначе свойства top и left не будут работать.

Ответ №2:

Здесь есть две проблемы:

Чтобы использовать стили css для top и left , вам необходимо, чтобы элемент был позиционирован. Я собираюсь relative , но вы можете выбрать любой. Для цитирования документации MDN top …

Свойство top CSS участвует в указании вертикального положения позиционируемого элемента. Это не влияет на непозиционированные элементы. (Источник: MDN Web Docs: top.)

Чтобы добавить элемент в тело, вы можете использовать document.body.appendChild() для JavaScript и append() для jQuery (поскольку ваш вопрос помечен как 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 amp;amp; data.position amp;amp; data.position.posy) ? data.position.posy : '0'}px`;
    errorElem.style.left = `${(data amp;amp; data.position amp;amp; 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 amp;amp; data.position amp;amp; data.position.posy) ? data.position.posy : '0'}px`;
    errorElem.style.left = `${(data amp;amp; data.position amp;amp; 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>

Ответ №3:

Идеи заключаются в следующем:

Ваш 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>