What is difference between html(content) method and replaceWith(content) mehtod? [Resolved]

Posted by Kumarkrishna184 under jQuery on 12/19/2015 | Points: 10 | Views : 578 | Status : [Member] | Replies : 3
What is difference between html(content) method and replaceWith(content) mehtod?

Thanks and Regards,
Krishna Kumar



Responses

Posted by: Rajnilari2015 on: 12/19/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
html(content) method replaces the contents of the element while replaceWith(content) method literally replaces the original element along with it's contents .

Let us understand the concept with an example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
$('#myspan').html('This is a <i>italic text</i>.This is another <i>italic text</i>.');
});

$('#btn2').click(function(){
$('#myspan').replaceWith('This is a <i>italic text</i>.This is another <i>italic text</i>.');
});
});
</script>
</head>
<body>
<button id="btn1">Exampleof html(Content)</button>
<button id="btn2">Exampleof replaceWith(Content)</button>

<span id="myspan">This is a <b>bold text</b>.This is another <b>bold text</b>.</span>

</body>
</html>


When we click on the "Exampleof html(Content)" button , the output becomes

<span id="myspan">This is a <i>italic text</i>.This is another <i>italic text</i>.</span>


This indicates that the inner html content of the span tag has been replaced .

When we click on the "Exampleof replaceWith(Content)" button , the output becomes

This is a <i>italic text</i>.This is another <i>italic text</i>.

This indicates that the original span tag along with it's contents has been replaced.

Hope this helps.

--
Thanks & Regards,
RNA Team

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Kumarkrishna184 on: 12/19/2015 [Member] Starter | Points: 25

Up
0
Down
Thanks sir, because of you my big doubt has been clear.....Thanks again sir.....

Thanks and Regards,
Krishna Kumar

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Rajnilari2015 on: 12/19/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 25

Up
0
Down
@Kumarkrishna184 Sir, glad that it helped you

--
Thanks & Regards,
RNA Team

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response