Stop .prepend() cloning and wrapping question

[afish674]

In the code below #yourVersion relates to an empty div with that ID.

//Previous code..$('#yourVersion')  .prepend(  "<h1>Test:</h1>"+"<p>"+"<strong>"+name+"</strong>"+": <strong>Version</strong>"+" "+year+"."+month+"."+day+"</p>"+"<input type='button' id='again' class='btn' value='Again?'></button>");  $('#again').click(function(){   $('#yourVersion').hide();   $('#form').show();  });

Two questions:

1. Why does the button created in the prepend method not sit inside the #yourVersion div?
2. How do I stop another copy of whats included in the prepend method being created everytime I press the "Again" button to go back to my form and then submit it again?

I tried:

if (!'#again'){$('#again').click(function(){   $('#yourVersion').hide();   $('#form').show();  });];

But this stopped the "again" button working completly. Thanks!

Edited May 22, 2012 by afish674

[justsomeguy]

The HTML string is incorrect, there is a "</button>" that doesn't match anything. That may be the cause of the issue. As for your second question, I'm not sure how you have that code executing in the first place, if that's in an event handler or somewhere else. Are you saying that when you click the button a second time you don't want to prepend additional HTML?

[afish674]

Good call on the </button>. It didn't make any difference, but I hadn't spotted it. I think it not wrapping was due to the collapsing div bug. I applied the same rules as I did to my other button (that works) and it was okay then. Basically I have a form with a submit button. When this is clicked theres a few calculations based on dates performed (the form collects date info). The #form div is then hidden and the #yourVersion div displayed. The results are shown in the yourVersion div using prepend. Theres a button underneath these results (#again) that when clicked hides the results and shows the form again (so you can enter different dates). If you click the #again button (having already submitted one set of results) it adds the second set under the first set in the #yourVersion div. If you press the #again button again, fill in the form a 3rd time and then press submit, the first two sets of results are displayed with the 3rd underneath, and so on. I only want it to display the last set of results. I hope that makes sense? Thanks for your help.

[justsomeguy]

You have a couple options. Instead of using prepend, you can overwrite the entire content. You can also remove the content before adding new content. You might want to check the documentation, but in jQuery I believe you use the html method to set the content of the container [el.html('content')]. Without jQuery you would use the element's innerHTML property: el.innerHTML = 'content'; I'm sure that jQuery would have a way to remove all of the child nodes, but you can also do it manually:

for (var i = el.childNodes.length - 1; i >= 0; i--){  el.removeChild(el.childNodes[i]);}

The reason that loops backwards is so that there's no confusion about the childNodes array getting renumbered if you remove the first child node.

[afish674]

Ahh, thank you so much! Having looked through the jQuery documentation, I found that the .html() method is indeed more appropriate to what I am trying to do. Works perfectly now! Awesome.