javascript - Dynamically inserted evenly spaced list items breaks justified approach -

i've been spacing list items using technique found in this answer, recent change requiring me insert elements dynamically. have found reason approach stops working if elements inserted dynamically. why?

this fiddle demonstrates static , dynamic versions.

as seen in linked question, basic idea below. it's when html inserted page via javascript, menu items don't justify.

html

<div id="menuwrapper">     <div class="menuitem">menu</div>     <div class="menuitem">menu</div>     ...     <span class="stretcher"></span> </div> 

css

#menuwrapper, #dynamic {     height: auto;     background: #000;     text-align: justify;     -ms-text-justify: distribute-all-lines;     text-justify: distribute-all-lines;     min-width: 300px; /* demo */ }  #dynamic {     background: blue; }   .menuitem {     width: auto;     height: 40px;     vertical-align: top;     display: inline-block;     *display: inline;     zoom: 1     background: #000;     color: yellow; }  .stretcher {     width: 100%;     display: inline-block;     font-size: 0;     line-height: 0; } 

there no spaces between elements. take jsfiddle

document.getelementbyid("dynamic").innerhtml = '<div class="menuitem">careers</div> <div class="menuitem">trade</div> <div class="menuitem">contact us</div> <div class="menuitem">privacy policy</div> <div class="menuitem">t&amp;cs</div> <div class="menuitem">sitemap</div> <span class="stretcher"></span>'; 

some related articles: - fighting space between inline block elements