Javascript getElementsByTagName - include embedded elements

Question

I am using a fragment of javascript from the internet to collect all the  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:

var DOMsupport = document.getElementsByTagName && 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 < 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);
}

I like the simplicity, no Jquery in sight, but I would like to be able to include line breaks   and/or links <a href="https://www.ncbi.nlm.nih.gov/pubmed/27827297">Click for PubMed</a> inside some of the footnotes.

When I try to include any other elements within the  tags the text is placed within the body - not collected and placed at the end. e.g.

<!DOCTYPE HTML>
<html>
<head>
<title>MDT Home</title>
</style>
<script type='text/javascript' 
    src='..\..\js\footnotes.js'>
</script>
</head>
<body>
<span id='footnotes' ><br>

<h2>Welcome to the MDT site<br></h2><br>
I have designed the site in a minimalist style using <a href='https://www.lua.org/' title='Lua'>Lua</a> it should run on all trust machines.<br>
<br>
To use the menu click the icon at the top left. If you have a modern browser you can use keyboard shortcuts  [<small>
Alt-M: Menu.<br>
Alt-H: MDT Home.<br>
Alt-K: Hip and Knee.<br>
Alt-A: Foot and Ankle.<br>
Alt-W: Wrist and Hand.<br>
Alt-S: Shoulder and Elbow.<br>
Alt-I: Spine.<br>
Alt-C: Children.<br>
</small>] e.g move to menu by entering Alt-M.
 Please read the terms of use before proceeding to review patient data. <br>

<br></span>
</body>
</html>

I'm not sure if the problem lies with the selection of allNotes using getElementsByTagName('small') producing a NodeList object, or is the problem the building of the newNote using allNotes[i].firstChild.nodeValue + ' ' .

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.

Any help gratefully received.

Gavin

It's not all that hard to learn, and you'll benefit from the freedom to create your own code. — David Thomas
– David Thomas, Commented Nov 10, 2016 at 20:09
Judging from the code you have, and that you already know what you want to add, you should be able to add new code to fit your requirement. As David said, if you don't know how to proceed, you should spend time learning what your code is doing. Reading about document.appendChild is a good start. — Gaʀʀʏ
– Gaʀʀʏ, Commented Nov 10, 2016 at 20:14
It's not entirely clear what your question is. The title leads me to believe you want to get elements by tag name, and include embedded elements when you get them, but then you're talking about adding something to footnotes. I don't see anywhere that says what the problem actually is. Please read How to Ask, and look into how to create a minimal reproducible example to be placed in the question itself. — Heretic Monkey
– Heretic Monkey, Commented Nov 10, 2016 at 20:14

Community · Accepted Answer · 2017-05-23 12:01:27Z

0

Spurred on by the criticism I have examined each line of this code to find why I can't have elements in my footnotes.

It appears you can't have elements within TextNodes. A post which Mr Thomas is well aware of, having contributed in the comments.

I will not be learning Javascript to find an alternative mechanism of collating fragments which may or may not contain elements. I know there are good bits of Javascript, but DOM coding does not seem to be one of them.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Nov 11, 2016 at 11:39

Gavin

4995 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript getElementsByTagName - include embedded elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related