After appending some Content to Parent Div,Content not appending to Child Div using .html of jquery

Question

I had added a div to 'parent of share button', and then i tried to append some span to 'share button'

1. $("#ShareBtn").parent().html("\\\\ i had appended some div code here");

2. $('#ShareBtn').html("\\\\some more code i added here");

but first action is successful,second one is failing..

can any one help me?

Answer 1

The first call would delete the #ShareBtn since jquery .html() replace all the elements contained inside the element, you would want to use .append() instead.

This is what's happening:

<div id="parent">
  <div id="shareBtn"></div>
</div>

after you run this line

$("#ShareBtn").parent().html("\\ i had appended some div code here");

the element would look like this:

<div id="parent">
  \\ i had appended some div code here
</div>

rendering the second line of code useless since the element ShareBtn doesn't exists anymore.

Answer 2

You have to know that $.html(); in jQuery doesn't append code, but replaces the innerHTML (see Javascript) of an element. In you code $('#ShareBtn') doesn't exist anymore after overwriting its parent content.