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

Posted by Kumarkrishna184 under jQuery on 12/19/2015 | Points: 10 | Views : 1068 | Status : [Member] | Replies : 3

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

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

Thanks and Regards,
Krishna Kumar

[Resolved]

Reply | Reply with Attachment

Alert Moderator

Responses

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

0	*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

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

0	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

0	@Kumarkrishna184 Sir, glad that it helped you -- Thanks & Regards, RNA Team Kumarkrishna184, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts