title: how to get value of an element using getElementById and getElementsByTagName together
body: <p>I am trying to <code>prettyprint</code> the value of <code>&lt;pre&gt;</code> element for which I will be getting either xml or JSON as string, so I am trying to get the value first and then test if it is xml or json and call respective prettyprint methods here is my code  ...</p>
  
  <pre><code>function showData(attName) {
      var attData = document.getElementById(attName).getElementsByTagName('pre')[0];
      alert(attData);
      // once I get the value would like to test whether it is xml or json
      //if (attData contains xml test condition )
            prettyPrint.xml(attData);
      else prettyPrint.json(attData);
  
      document.getElementById('Details').style.display='none';
      document.getElementById(attName).style.display='block';
  }    
  </code></pre>
  
  <p>So the <code>showData</code> will be called whenever I click on View link in the below code ..</p>
  
  <pre><code>&lt;div id="Details" class="body"&gt;
      &lt;a href="javascript:showData('${attachmentName}')"&gt;View&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="${attachmentName}" style="display:none; margin-left:60px; margin-top:5px;position:absolute;background-color:#F8F8F8;padding:10px" &gt;
      &lt;h1&gt;${attachmentName}:${attachmentId}&lt;/h1&gt;
  
      &lt;a href="javascript:hideData('${attachmentName}')"&gt;&lt;h5 style="color: #FF0066;"&gt; [X Close] &lt;/h5&gt;&lt;/a&gt; &lt;br/&gt;
  
      &lt;pre class="prettyprint"&gt;${attachmentData}&lt;/pre&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>In alert I am getting <code>[object HTMLPreElement]</code> but not sure how to make it to string, so I have also tried ...</p>
  
  <pre><code>var objectHTMLCollection = document.getElementById(attName).getElementsByTagName('pre')[0],
      string = [].map.call( objectHTMLCollection, function(node){
          return node.textContent || node.innerText || "";
      }).join("");
  alert (objectHTMLCollection);
  </code></pre>
  
  <p>But still getting as <code>HTMLPreElement</code>...</p>
  
  <p>I have tried the JQuery <code>jQuery('#'+attName).find('.prettyprint').data();</code> but got the result as <code>[object Object]</code> . 
  I don't have much exposure in the JavaScript,may be I am not doing it in right way. It would be great if anyone can help on this.</p>