Javascript getElementsByTagName - 包括嵌入元素

Question

我正在使用来自互联网的 javascript 片段来收集 div id 'footnotes' 中的所有 <small></small> 元素，并将它们作为有序列表附加到我文档的末尾，带有链接和反向链接（即 Easy HTML 脚注），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);
}

我喜欢这种简单，看不到 Jquery，但我希望能够在一些脚注。

当我尝试在 <small></small> 标签中包含任何其他元素时，文本被放置在正文中 - 而不是收集并放置在末尾。例如

<!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>

我不确定问题是否在于使用 getElementsByTagName('small') 选择 allNotes 生成 NodeList 对象，或者是使用 [= 构建 newNote 的问题20=].

抱歉，我没有这个片段的原始来源 - 通常我会注明作者 - 并直接询问他们。在一个理想的世界中，我会正确地学习 javascript 而不是剔除片段然后粘贴到我的页面中。

感谢收到的任何帮助。

加文

Answer 1

受到批评的刺激，我检查了这段代码的每一行，以找出为什么我不能在脚注中包含元素。

It appears you can't have elements within TextNodes。 post Thomas 先生很清楚，他在评论中做出了贡献。

我不会学习 Javascript 来寻找一种替代机制来整理可能包含或不包含元素的片段。我知道 Javascript 有一些不错的地方，但是 DOM 编码似乎不是其中之一。

Javascript getElementsByTagName - 包括嵌入元素

Javascript getElementsByTagName - include embedded elements

html

javascript

getelementsbytagname