Форум

kevin2 · #1 (**permalink**) 05.05.2020, 11:42

Никак не могу справиться с вложенными append. Всю голову сломал. Опыта не хватает. text и selectmark нужно именно объектами вставлять, а не текстом, потому как они динамически создаются. И таких мест почти десяток, которые вставить нужно. Пока самый простой способ вижу - создавать еще переменные на каждый row и col и к ним сначал добавлять объекты, а потом уже их в форму. Если делаю

form.append("<div class=row></div>").append("<div class=col></div>").append(text);

то он row закрывает раньше.

var form = "<form></form>";
var selectmark = "<select></select>";
var text = "some text";

мне нужно на выходе получить:

<form>
 <div class="row">
  <div class="col">
    ==text==
  </div>
  <div class="col">
    ==selectmark==
  </div>
 </div>
</form>

laimas · #2 (**permalink**) 05.05.2020, 12:17

Если $('<div class="row"/>').appendTo(form).то далее тут мы будем иметь вставленный div. А form.append("<div class=row></div>").тут все еще form, от этого и казус.

kevin2 · #3 (**permalink**) 05.05.2020, 12:20

laimas,
А можете показать как правильно это написать вложенными?

потому как

Цитата:

$('<div class="row"/>').appendTo(form).то далее тут мы будем иметь вставленный div.

а как дальше в этот row вставить col, если row не имеет уникального идентификатора ?

laimas · #4 (**permalink**) 05.05.2020, 13:13

Способов много может быть, но если цепочкой описать и использовать append, то:

form.append(вставляемый html элемент)
.find(селектор вставленного элемента) //получаем этот элемент
.append(...) //вставляем в него что-то
.end() //возвращаемся к форме
.append(...) //опять что-то вставляем в форму
. и т.д.

рони · #5 (**permalink**) 05.05.2020, 13:21

kevin2,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .row{
        border: 4px solid #006400;
        margin: 10px;
    }
    .col{
        border: 2px solid #0000CD;
        margin: 10px;
    }
    form{
       border: 2px solid #FFD700;
        margin: 10px;
    }

    </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

  <script>
$(function() {
var form = "<form></form>";
var selectmark = "<select></select>";
var text = "some text";
var row = "<div class='row'></div>"
text = document.createTextNode(text);
var row = $(row);
$(form).appendTo("body").append(row);
row.append(text, $(selectmark))
.contents().wrap("<div class='col'></div>")
});
  </script>

</head>
<body>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript