Вы пытаетесь сделать <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>
<script src="..."></script>
можно убрать. Непонятно только что не так было со сниппетом...<div id="b_0">
действительно имеет внутри себя<form></form>
. Но да ладно.