I'm just try to replace the content of a div with new content binded to a click event.
JSFIDDLE
When I use appendTo()
instead of of html()
it's working, but I need to clear the old content out so I'm a bit confused why this is not working like it should do
When . html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.
For replacing innerHTML of a div with jquery, html() function is used. After loading the web page, on clicking the button content inside the div will be replaced by the content given inside the html() function.
We can replace HTML elements using the jQuery . replaceWith() method. With the jQuery replaceWith() method, we can replace each element in the set of matched elements with the provided new content and return the set of elements that were removed.
To load external HTML into a <div>, wrap your code inside the load() function. To load a page in div in jQuery, use the load() method.
You are using content
in place of selector
and selector
in place of content
, you need to use #
with id selctor. you can do it this way
Live Demo
function showitnow() {
var div_data = "<div ><a href='XXX'>XXX</a></div>";
$("#test1").html(div_data);
}
$("#button1").click(function() {
showitnow();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With