title: JavaScript createElement
body: <p>I downloaded a livesearch javascript plugin for my site, it's working, but I need help to modify it a little bit.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>$.ajax({url: $('base').attr('href') + 'index.php?route=product/search/ajax&amp;keyword=' + keywords, dataType: 'json', type: 'GET', success: function(result) {
      if( result.length &gt; 0 ) {
          var eList = document.createElement( 'ul' );
          eList.id = 'livesearch_search_results';
          var eListElem;
          var eLink;
          var eHref;
          for( var i in result ) {
              eListElem = document.createElement( 'li' );
              eLink = document.createElement( 'a' );
              if( result[i].img != null ) {
                  eImg = new Image();
                  eImg.src = result[i].img;
              }
              else {
                  eImg = document.createElement( 'span' );
                  eImg.innerHTML = '&amp;nbsp;';
              }
              eDiv = document.createElement( 'div' );
              eLink.appendChild( document.createTextNode(result[i].name) );
              if( typeof(result[i].href) != 'undefined' ) {
                  eHref = result[i].href;
              }
              else {
                  eHref = $('base').attr('href') + 'index.php?route=product/product&amp;product_id=' + result[i].product_id + '&amp;keyword=' + keywords;
              }
              eLink.href = eHref;
              eDiv.appendChild( eLink );
              eDiv.innerHTML = eDiv.innerHTML + result[i].desc;
              eListElem.appendChild( eImg );
              eListElem.appendChild( eDiv );
              eListElem.appendChild( document.createElement('br') );
              eListElem.setAttribute( 'rel', eHref );
              $(eListElem).bind('click', function(){
                  var gto = $(this).attr( 'rel' );
                  try {
                      if( gto != false &amp;&amp; gto.length &gt; 0 ) {
                          document.location = gto;
                      }
                  }
                  catch( e ) {}
              });
              eList.appendChild( eListElem );
          }
          if( $('#livesearch_search_results').length &gt; 0 ) {
              $('#livesearch_search_results').remove();
          }
          $('#search_menu').append(eList);
      }
  }});
  </code></pre>
  
  <p>The output is something like this: </p>
  
  <pre><code>&lt;li rel="http://url"&gt;&lt;img src="http://url.jpg"&gt;
  &lt;div&gt;&lt;a href="url"&gt;TITLE&lt;/a&gt;Description&lt;/div&gt;
  &lt;br&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Is there any way to add a  element to the  tag? Like this:</p>
  
  <pre><code>&lt;li rel="http://url"&gt; &lt;span class="img_container"&gt;&lt;img src="http://url.jpg"&gt; &lt;/span&gt;
  &lt;div&gt;&lt;a href="url"&gt;TITLE&lt;/a&gt;Description&lt;/div&gt;
  &lt;br&gt;&lt;/li&gt;
  </code></pre>
  
  <p>I know, that I can create a  tag with <code>document.createElement( 'span' )</code>, but I don't know where is exactly going in this case.</p>