title: Want to extract all inner text and link from td's content
body: <p>here is my sample td's content.</p>
  
  <pre><code>&lt;table id='test' border=1&gt;&lt;tr&gt;&lt;td&gt;hello....&lt;/td&gt;&lt;/tr&gt;
  &lt;tfoot&gt;
  &lt;tr class="webgrid-footer"&gt;
      &lt;td colspan="6"&gt;1 
          &lt;a href="Show3.html" &gt;2&lt;/a&gt; 
          &lt;a href="Show3.html" &gt;3&lt;/a&gt; 
          &lt;a href="Show3.html" &gt;4&lt;/a&gt; 
          &lt;a href="Show3.html" &gt;&amp;gt;&lt;/a&gt; 
          &lt;a href="Show3.html" &gt;&amp;gt;&amp;gt;&lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>my objective is to extract inner text from html element....like <code>1 or 2 or &amp;gt; or &amp;gt;&amp;gt;</code></p>
  
  <p>this script i am using to get inner text...i am bit close but still not giving right result. so please anyone has a look and give me rectified code.</p>
  
  <pre><code>function getOuterHtml($el){
      var wrapper = document.createElement('div');
      wrapper.appendChild($el[0].cloneNode(true));
      return wrapper.innerHTML;
  } 
  
  var $elements = $('.webgrid-footer td').contents()
  .filter(function() 
  {
    return (this.nodeType === 3 &amp;&amp; $.trim(this.nodeValue) !== '')
           || this.nodeType === 1;
  });  
  
  var $div = $('&lt;div id="content" /&gt;');
  var $list = $('&lt;ul /&gt;');
  var strData='';
  
  $elements.each(function(){
      if($(this).html()===null)
      {
          alert(getOuterHtml($(this)));
      }
      else
      {
          alert(getOuterHtml($(this)));
      }
      var $item = $('&lt;li /&gt;').append($(this));      
      $list.append($item);
  });
  $div.append($list);
  //alert(strData);
  $('#dv').append($div);
  </code></pre>
  
  <p>here is js fiddle link <a href="https://jsfiddle.net/tridip/ab69osqu/" rel="nofollow">https://jsfiddle.net/tridip/ab69osqu/</a></p>
  
  <p>looking for suggestion. thanks</p>