Displaying hidden html in a jQuery UI Dialog
I'm using jQuery UI's Dialog. In order to very nicely wrap the window around my content, I have to first load the dialog on 2 empty nested divs (<div><div></div></div>
). Then, after the Dialog is opened, I populate the Dialog with content. I spent a lot of time on that... that's not what this question is about. Please don't suggest alternatives to that mechanism.
My issue is only that I need to display html from within the webpage like the following:
<div id="mydialog">
<form>
<label for="name">My name:</label>
<input type="text" id="name" name="name"/>
</form>
</div>
However, I want that html above hidden on the webpage. So I set the css to display: none;
. I then do an .append($('#mydialog')).childr开发者_开发问答en().css('display', 'block');
to the inner div of the Dialog.
My question is... how do I remove the html from the webpage? By doing a jQuery append, aren't I making a complete copy? I'm getting performance issues because I have a ton of these. Instead of .append(), should I be doing something like $('#mydialog').moveTo('#innerDivOfDialog');
? Should I do a $('#mydialog').removeFromWebpage();
on the original hidden html? Is there a jQuery method that does a removeFromWebpage()? What's the proper mechanism here?
From jQuery append docs :
We can also select an element on the page and insert it into another:
$('.container').append($('h2'));
If an element selected this way is inserted elsewhere, it will be moved into the target
So, it is being moved, not copied.
If you're still interested in removal, see jQuery remove
You can remove these elements from the DOM (not the HTML which is static, once it's been received by the client, but that is really just an issue of what you call things) all you need is to call .detach()
on the moved item before appending it where you want.
$foo.append($('#mydialog').detach()).children().css('display', 'block');
精彩评论