Stuck : filling html <ul> with <li> using Javascript with a loop? -

i have function retrieves last 10 facebook posts, when use console.log(); displays messages correctly.but when trying fill ul each message list item displays first message , can't seem fix it. in advance

function getinfo() {   fb.api('/me', 'get', {fields: 'first_name,last_name,name,id,posts.limit(999),email,picture.width(150).height(150)',}, function(response) {    document.getelementbyid('myname').innerhtml = response.name;    document.getelementbyid('myemail').innerhtml = response.email;    var gpost = document.getelementbyid('myposts').innerhtml = response.posts;   ///////////only last 10 status posts/////////////    var postcount =0;    var ul =document.createelement('ul');    for(var i=0;i<999;i++){      if(!gpost.data[i].message==" "){         if (postcount<10){           var li = document.createelement('li');           var list=document.getelementbyid('myposts').innerhtml=gpost.data[i].message;              li.appendchild('list');             ul.appendchild(li);           console.log(gpost.data[i].message);          postcount++;     }else{       break;     }    }          }     document.getelementbyid('status').innerhtml = "<img src='" + response.picture.data.url + "'>";   }); } 

i think during testing tried out interesting variants, getting list document, , trying add new list, eg:

var list=document.getelementbyid('myposts').innerhtml=gpost.data[i].message; li.appendchild( list ); 

i not sure wanted statement (you myposts element, set innerhtml received message, , append result of action newly created li.

why not set innerhtml of li element @ once so:

li.innerhtml = gpost.data[i].message; 

another thing seem forgetting don't add ul element document @ end, think, after loop, forgetting (in case wish replace content)

document.getelementbyid('myposts').innerhtml = ul.outerhtml; 

i created code snippet mock of fb api (at least, can read initial post) , updated snippet can see happening

main changes loop, got bit easier

for (i = 0; < gpost.data.length && postcount < 10; i++) {   if (gpost.data[i].message) {     li = document.createelement('li');     li.innerhtml = gpost.data[i].message;     ul.appendchild(li);     postcount++;   } } 

and fact replace content of myposts element

'use strict';    var posts = [{              message: 'message1'            },            {              message: 'message2'            },            {              message: null            },            {              message: ''            },            {              message: 'message5'            }          ];    // testing purposes  var fb = {    api: function(item, action, fields, callback) {      callback({        name: 'name',        email: 'email',        posts: {          data: posts        },        picture: {          data: {            url: '/favicon.ico'          }        }      });    }  };    function getinfo() {    fb.api('/me', 'get', {      fields: 'first_name,last_name,name,id,posts.limit(999),email,picture.width(150).height(150)',    }, function(response) {      document.getelementbyid('myname').innerhtml = response.name;      document.getelementbyid('myemail').innerhtml = response.email;      var gpost = response.posts,        postcount = 0,        ul = document.createelement('ul'),        li, i;      (i = 0; < gpost.data.length && postcount < 10; i++) {        if (gpost.data[i].message) {          li = document.createelement('li');          li.innerhtml = gpost.data[i].message;          ul.appendchild(li);          postcount++;        }      }        document.getelementbyid('myposts').innerhtml = ul.outerhtml;      document.getelementbyid('status').innerhtml = "<img src='" + response.picture.data.url + "'>";    });  }    getinfo();    /* add messages time time next 5 seconds */  var interval = setinterval( () => posts.push({ message: 'message' + ( posts.length + 1) }), 500 );    // stop interval in 5 seconds  settimeout( () => clearinterval( interval ), 5000 );

<div>    <div id="myname"></div>    <div id="myemail"></div>    <div id="myposts"></div>    <div id="status"></div>  </div>  <button type="button" onclick="getinfo()">get messages</button>