title: Building a hierarchical HTML list based on text with dots
body: <p>I'm searching for an algorithm which will convert a data structure like the following one, where each level is separated by a dot:</p>
  
  <pre><code>child1
  child1.child9
  child4.child10.child11
  child4.child10.child12
  </code></pre>
  
  <p>into a valid HTML hierarchical list element like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;child1
      &lt;ul&gt;&lt;li&gt;child9&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;child4
      &lt;ul&gt;&lt;li&gt;child10
          &lt;ul&gt;&lt;li&gt;child11&lt;/li&gt;&lt;li&gt;child12&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Any suggestions?</p>
  
  <p>Update </p>
  
  <p>Problem
  from this kind of structure(below) is easy to build hierarchical list</p>
  
  <pre><code>child
  child.child1
  child.child2
  child.child2.child3
  </code></pre>
  
  <p>but my structure is</p>
  
  <pre><code>child.child2.child3
  child7
  child10.child14.child15
  child10.child14.child16
  </code></pre>
  
  <p>so i dont have separate row to build parent element :( i must build tree from one row if there is no parent</p>