How to add content to html body using JS

Question

I have many  lt section gt  in my html  lt body gt  and want to add more through javascript  However  using innerHTML is just replacing my existing sections with new ones  instead of adding them to the old ones   What else can I use

User · Answer

You re probably using    document getElementById  element   innerHTML    New content    Try this instead    document getElementById  element   innerHTML     New content    Or  preferably  use DOM Manipulation   document getElementById  element   appendChild document createElement  div      Dom manipulation would be preferred compared to using innerHTML  because innerHTML simply dumps a string into the document  The browser will have to reparse the entire document to get it s stucture

User · Answer

Just       document getElementById  myDiv   innerHTMl     New Content

User · Answer

You can use  document getElementById  parentID   appendChild     your content created using DOM methods        or  document getElementById  parentID   innerHTML    new content

User · Answer

Try the following syntax   document body innerHTML      lt p gt My new content lt  p gt

User · Answer

Working demo    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt   lt head gt   lt title gt  lt  title gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt   lt script type  text javascript  gt  onload   function    var divg   document createElement  div    divg appendChild document createTextNode  New DIV     document body appendChild divg       lt  script gt   lt  head gt   lt body gt    lt  body gt   lt  html gt

User · Answer

In most browsers  you can use a javascript variable instead of using document getElementById  Say your html body content is like this    lt section id  mySection  gt  Hello  lt  section gt    Then you can just refer to mySection as a variable in javascript   mySection innerText       world     same as  document getElementById  mySection   innerText       world    See this snippet    x000D   x000D  mySection innerText       world   x000D   lt section id  mySection  gt  Hello  lt  section gt  x000D   x000D   x000D

User · Answer

I think if you want to add content directly to the body  the best way is   document body innerHTML   document body innerHTML    bla bla     To replace it  use   document body innerHTML    bla bla

User · Answer

I Just came across to a similar to this question solution with included some performance statistics   It seems that example below is faster    x000D   x000D  document getElementById  container   insertAdjacentHTML  beforeend     lt div id  idChild  gt  content html  lt  div gt     x000D   x000D   x000D    InnerHTML vs jQuery 1 vs appendChild vs innerAdjecentHTML     Reference   1  Performance stats 2  API - insertAdjacentHTML  I hope this will help

[javascript] How to add content to html body using JS?

Examples related to javascript