How to add text to an existing div with jquery

Question

I want to add text to an existing div  when I click the Button with the id  add  But this is not working    Here my code     x000D   x000D    function      x000D        Add   click function      x000D          lt p gt Text lt  p gt    appendTo   Content    x000D        x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D    lt div id  Content  gt  x000D       lt button id  Add  gt Add lt  button gt  x000D    lt  div gt  x000D   x000D   x000D    I hope you can help me

User · Answer

Your html is invalid button is not a null tag  Try   lt div id  Content  gt      lt button id  Add  gt Add lt  button gt   lt  div gt

User · Answer

You need to define the button text and have valid HTML for the button    I would also suggest using  on for the click handler of the button   x000D   x000D    function      x000D        Add   on  click   function      x000D          lt p gt Text lt  p gt    appendTo   Content    x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div id  Content  gt  x000D       lt button id  Add  gt Add Text lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    Also I would make sure the jquery is at the bottom of the page just before the closing  lt  body gt  tag   Doing so will make it so you do not have to have the whole thing wrapped in   function but I would still do that   Having your javascript load at the end of the page makes it so the rest of the page loads incase there is a slow down in your javascript somewhere

User · Answer

Running example     x000D   x000D    If you want add the element before the actual content  use before   x000D    function      x000D        AddBefore   click function      x000D          Content   before   lt p gt Text before the button lt  p gt     x000D        x000D      x000D   x000D    If you want add the element after the actual content  use after   x000D    function      x000D        AddAfter   click function      x000D          Content   after   lt p gt Text after the button lt  p gt     x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 0 0 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  Content  gt  x000D   lt button id  AddBefore  gt Add before lt  button gt  x000D   lt button id  AddAfter  gt Add after lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

we can do it in more easy way like by adding a function on button and on click we call that function for append    lt div id  Content  gt   lt button id  Add  onclick  append     gt Add Text lt  button gt   lt  div gt    lt script type  text javascript  gt  function append         lt p gt Text lt  p gt    appendTo   Content       lt  script gt

User · Answer

x000D   x000D    function      x000D        Add   click function      x000D          lt p gt Text lt  p gt    appendTo   Content    x000D        x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D    lt div id  Content  gt  x000D       lt button id  Add  gt Add lt button gt  x000D    lt  div gt  x000D   x000D   x000D

User · Answer

Very easy from My side -   lt html gt   lt head gt   lt script     src  https   ajax googleapis com ajax libs jquery 1 12 2 jquery min js  gt  lt  script gt   lt script gt        document  ready function                input   click function                     lt input type  text  name  name  value  value   gt    appendTo   testdiv                          lt  script gt   lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt   lt title gt Insert title here lt  title gt   lt  head gt   lt body gt       lt div id  testdiv  gt  lt  div gt       lt input type  button  value  Add    gt   lt  body gt   lt  html gt

[jquery] How to add text to an existing div with jquery

Examples related to jquery

Examples related to html

Examples related to text

Examples related to add