title: Javascript getElementsByTagName - include embedded elements
body: <p>I am using a fragment of javascript from the internet to collect all the <code>&lt;small&gt;&lt;/small&gt;</code> elements within a div id 'footnotes' and append them as an ordered list at the end of my document, with links and back links (i.e Easy HTML Footnotes), Footnotes.js:</p>
  
  <pre><code>var DOMsupport = document.getElementsByTagName &amp;&amp; document.createElement;
  
  window.onload = function() {
      if (!DOMsupport) return;
  
      var footNoteHolder = document.getElementById('footnotes');
      var allNotes = footNoteHolder.getElementsByTagName('small');
      var notesList = document.createElement('ol');
  
      notesList.className = 'notesList';
  
      for (var i = 0; i &lt; allNotes.length; i++) {
          var newA = document.createElement('a');
          newA.id = 'text-' + (i + 1);
          newA.setAttribute('href', '#footnote-' + (i + 1));
          newA.setAttribute('title', 'Jump to footnote');
          newA.appendChild(document.createTextNode((i + 1)));
  
          newBackLink = document.createElement('a');
          newBackLink.id = 'footnote-' + (i + 1);
          newBackLink.setAttribute('href', '#text-' + (i + 1));
          newBackLink.setAttribute('title', 'Back to text');
          newBackLink.appendChild(document.createTextNode('[back]'));
  
          newNote = document.createElement('li');
          newNote.appendChild(document.createTextNode(allNotes[i].firstChild.nodeValue + ' '));
          newNote.appendChild(newBackLink);
          notesList.appendChild(newNote);
  
          allNotes[i].replaceChild(newA, allNotes[i].firstChild);
      }
      footNoteHolder.appendChild(document.createElement('hr'));
      footNoteHolder.appendChild(notesList);
  }
  </code></pre>
  
  <p>I like the simplicity, no Jquery in sight, but I would like to be able to include line breaks <code>&lt;br&gt;</code> and/or links  <code>&lt;a href="https://www.ncbi.nlm.nih.gov/pubmed/27827297"&gt;Click for PubMed&lt;/a&gt;</code> inside some of the footnotes.</p>
  
  <p>When I try to include any other elements within the <code>&lt;small&gt;&lt;/small&gt;</code> tags the text is placed within the body - not collected and placed at the end. e.g.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;MDT Home&lt;/title&gt;
  &lt;/style&gt;
  &lt;script type='text/javascript' 
      src='..\..\js\footnotes.js'&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;span id='footnotes' &gt;&lt;br&gt;
  
  &lt;h2&gt;Welcome to the MDT site&lt;br&gt;&lt;/h2&gt;&lt;br&gt;
  I have designed the site in a minimalist style using &lt;a href='https://www.lua.org/' title='Lua'&gt;Lua&lt;/a&gt; it should run on all trust machines.&lt;br&gt;
  &lt;br&gt;
  To use the menu click the icon at the top left. If you have a modern browser you can use keyboard shortcuts  [&lt;small&gt;
  Alt-M: Menu.&lt;br&gt;
  Alt-H: MDT Home.&lt;br&gt;
  Alt-K: Hip and Knee.&lt;br&gt;
  Alt-A: Foot and Ankle.&lt;br&gt;
  Alt-W: Wrist and Hand.&lt;br&gt;
  Alt-S: Shoulder and Elbow.&lt;br&gt;
  Alt-I: Spine.&lt;br&gt;
  Alt-C: Children.&lt;br&gt;
  &lt;/small&gt;] e.g move to menu by entering Alt-M.
   Please read the terms of use before proceeding to review patient data. &lt;br&gt;
  
  &lt;br&gt;&lt;/span&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm not sure if the problem lies with the selection of <code>allNotes</code> using <code>getElementsByTagName('small')</code> producing a NodeList object, or is the problem the building of the <code>newNote</code> using <code>allNotes[i].firstChild.nodeValue + ' '</code> .</p>
  
  <p>Sorry I don't have the original source of this fragment any longer - normally I would credit the author - and ask them directly. In an ideal world I would learn javascript properly instead of culling fragments and pasting then into my pages.</p>
  
  <p>Any help gratefully received.</p>
  
  <p>Gavin</p>