Question

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

我喜欢简单，看不到Jquery，但我希望能够在一些脚注中包含换行符 和/或链接<a href="https://www.ncbi.nlm.nih.gov/pubmed/27827297">Click for PubMed</a>。

当我尝试在标签中包含任何其他元素时，文本放在正文中 - 不收集并放在最后。 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>

我不确定问题是选择allNotes使用getElementsByTagName('small')生成NodeList对象，还是使用newNote构建allNotes[i].firstChild.nodeValue + ' '的问题}。

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

感激不尽的任何帮助。

加文

Answer 1

受到批评的刺激，我已经检查了这段代码的每一行，以找出为什么我的脚注中没有元素。

It appears you can't have elements within TextNodes。托马斯先生非常清楚的一篇文章，在评论中做出了贡献。

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

Javascript getElementsByTagName - 包含嵌入的元素

1 个答案: