1

Пытаюсь создать форму:

$("#b_0").html('<form>');
$("#b_1").html('<input id="dstr" type="hidden" value="">');
$("#b_2").html('<input id="kstr" type="hidden" value="">');
$("#b_3").html('<input type="hidden" id="mta" value = ""/>');
$("#b_4").html('</form>');
<div id="b_0"></div>
<div id="b_1"></div>
<div id="b_2"></div>
<div id="b_3"></div>    
<div id="b_4"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

На выходе получаю:

<div id="b_0">
    <form></form>
</div>

А <div id="b_4"></div> - пустой. Как можно добавить <form> без закрывания?

5
  • Вы хотите разорвать форму между двумя дивами. Это не правильно. 21 ноя 2015 в 3:29
  • @TimofeyBondarev если уж ломать созданный мною рабочий сниппет, то и <script src="..."></script> можно убрать. Непонятно только что не так было со сниппетом...
    – Regent
    21 ноя 2015 в 4:32
  • Он ничего не отображал при выполнении. Так как видимого результата нет, ценность в его запуске сомнительная. 21 ноя 2015 в 4:34
  • @TimofeyBondarev визуальных красивостей, конечно, не было, но зато при инспекции четко было видно, что, например, <div id="b_0"> действительно имеет внутри себя <form></form>. Но да ладно.
    – Regent
    21 ноя 2015 в 4:36
  • Возможно, я был не прав. Вы можете отменить мою правку, воспользовавшись кнопкой "откат" на предпоследней правке. 21 ноя 2015 в 4:37

1 ответ 1

0

Вы пытаетесь сделать <div id="b_0"><form></div>, что не является валидным HTML-кодом. Браузер исправляет ошибку, добавляя </form>.

Самый простой вариант создания формы внутри блока #b_0:

var html ='<form>';
html += '<input id="dstr" type="text" value="">';
html += '<input id="kstr" type="text" value="">';
html += '<input type="text" id="mta" value = ""/>';
html += '</form>';
$('#b_0').html(html);
<div id="b_0"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

type="hidden" заменён на type="text" для наглядности.


Чуть более высокоуровневый подход:

var $form = $('<form>');
var $dstr = $('<input>', { id: "dstr", type: "text", value: "" });
var $kstr = $('<input>', { id: "kstr", type: "text", value: "" });
var $mta = $('<input>', { id: "mta", type: "text", value: "" });
$form.append($dstr);
$form.append($kstr);
$form.append($mta);
$('#b_0').html($form);
<div id="b_0"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Если <input>-ы обязательно должны быть внутри уже существующих <div id="b_1"></div> ... <div id="b_3"></div>, то эти блоки хотя бы должны быть внутри <div id="b_0"></div>:

$("#b_0").wrapInner('<form>');
$("#b_1").html('<input id="dstr" type="text" value="">');
$("#b_2").html('<input id="kstr" type="text" value="">');
$("#b_3").html('<input type="text" id="mta" value = ""/>');
<div id="b_0">
    <div id="b_1"></div>
    <div id="b_2"></div>
    <div id="b_3"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • Спасибо. Решил задачу! 21 ноя 2015 в 10:28
  • @АлексЧе на здоровье. Если ответ вас устраивает, не забудьте отметить его как правильный, нажав на галку в левой верхней части ответа.
    – Regent
    21 ноя 2015 в 10:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.