jQuery-如何在HTML中移动结束标记

Question

I am looking for a way to move just a closing form tag using jQuery.

Currently the HTML looks something like this:

<form class="myform">
  <input class="text_field" id="profile_nickname" name="profile[nickname]" size="30" type="text" value="" data-validate="true">
</form>
<div class="form-action">
  <submit class="x">
</div>

Because the submit tag is outside of the form, the submit button doesn't work.

I want to say something like:

$(".myform").remove('</form>')
$('</form>').appendTo($('.form-action'))

This of course does not work. Any Ideas would be appreciated.

Answer 1

.append（）不能像字符串串联那样工作，您可以在其中切成一片并将其粘贴到其他地方...您需要移动dom元素

$('.form-action').appendTo('.myform')

Answer 2

you can use click event to sent out the form

$(".form-action").click(submitForm);

function submitForm(){
$(".myform").submit();
}

Answer 3

you can clone the old object,append the new one to "form",and hide the old one.

var $new = $('.form-action').clone();
$('.form-action').hide();
$new.show();
$new.appendTo('.myform');

Answer 4

This feels really wrong, but I know what its like to work under bad conditions with a hateful content management system... So here it goes...

If there is really no other way around it you can reset the HTML content with . html() like so:

Working Example

$('body').html(
    '<form class="myform">' +
    '<input class="text_field" id="profile_nickname" name="profile[nickname]" size="30" type="text" value="" data-validate="true">' +
    '<div class="form-action">' +
    ' <submit class="x">' +
    '</div></form>');

This is an ugly way to do it, but if you're backed into a corner it will work.