Добавление тега формы в существующие HTML-теги

Question

Я пытаюсь добавить форму вокруг существующих тегов HTML.

Это не работает, потому что он автоматически помещает форму закрывающий тег после формы открытой ..

<div id="logon-form"></div> 
    <input type="text" id="user-name"/> 
    <input type="password" id="password"/> 
<div id="close-form"></div> 

$("#logon-form").append('<form id="LogOnForm" action="/Account/LogonDialog" method="POST" enctype="application/x-www-form-urlencoded">'); 
$("#close-form").append('</form>'); 

Любые идеи? Использование одного div в форме logon также не работает.

Если вы хотите знать, почему я делаю это так, это победит автоматическое сохранение во многих браузерах, которые не соответствуют атрибуту autosave = off.

Answer 1

Вы не можете рассматривать введение элементов в DOM так же, как писать html в текстовом редакторе.

DOM занимается только полными и действительными элементами. Фактически, как работает jQuery, вы закрываете форму в первом добавлении, независимо от того, не имеет ли закрывающего тега

Пример $('<div>') создаст действительный закрытый элемент.

Используйте wrap() для вашей ситуации. Логика использования append не будет работать, так как она будет вставлять форму в конце селектора. Также помещать закрывающий тег внутри другого div также будет недействительным.

Вы также можете выложить форму после #closed-form, а затем добавить элементы, указанные в форме. структура HTML показано кажется очень странным, чтобы начать с

Артикул: wrap() API docs

Answer 2

Поскольку вы не один, содержащий элемент, вы можете использовать .wrapAll() с .add() делать то, что вы после:

$("#logon-form").add('input').add('#close-form').wrapAll('<form id="LogOnForm" action="/Account/LogonDialog" method="POST" enctype="application/x-www-form-urlencoded" />'); 

jsFiddle example

Answer 3

<div id="logon-form"> 
    <input type="text" id="user-name"/> 
    <input type="password" id="password"/> 
</div> 

$("#logon-form").wrap('<form id="LogOnForm" action="/Account/LogonDialog" method="POST" enctype="application/x-www-form-urlencoded">'); 

Спасибо. Это сработало хорошо.

Дал мне это:

<form id="LogOnForm" action="/Account/LogonDialog" method="POST" enctype="application/x-www-form-urlencoded"> 
    <div id="logon-form"> 
     <input type="text" id="user-name"/> 
     <input type="password" id="password"/> 
    </div> 
</form>