Javascript getElementsByTagName - 包含嵌入元素

-4

我使用來自Internet的JavaScript片段來收集div id'腳註'中的所有元素，並將它們作爲有序列表追加到文檔的末尾，並帶有鏈接和返回鏈接（即簡單的HTML腳註），Footnotes.js：Javascript getElementsByTagName - 包含嵌入元素

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>裏面的一些腳註。

當我嘗試包括標籤的文本放置在身體內的任何其他元素 - 而不是收集和放在最後。例如

<!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對象的選擇，或者是使用allNotes[i].firstChild.nodeValue + ' '的newNote建設的問題。

對不起，我沒有這個片段的原始來源不再 - 通常我會存入作者 - 直接問他們。在理想的世界中，我會正確學習JavaScript，而不是剔除碎片並粘貼到我的頁面中。

任何幫助感激地收到。

加文

來源

2016-11-10 Gavin

學習並不難，而且您可以從創建自己的代碼的自由中受益。 –

從你的代碼判斷，你已經知道你想添加什麼，你應該能夠添加新的代碼來適應你的需求。正如David所說，如果你不知道如何繼續，你應該花時間學習你的代碼在做什麼。閱讀關於[document.appendChild]（http://www.w3schools.com/jsref/met_node_appendchild.asp）是一個好的開始。 –

這個問題並不完全清楚。標題使我相信你想要通過標籤名稱來獲取元素，並且在獲得元素時包含嵌入的元素，但是接下來你要說的是在腳註中添加一些內容。我沒有看到任何說實際問題的地方。請閱讀[問]，並研究如何創建一個[mcve]放置在問題本身。 –

通過我已經研究這個代碼的每一行找到我爲什麼不能在我的腳註元素批評的激勵下。

It appears you can't have elements within TextNodes。托馬斯很清楚的一篇文章，在評論中做出了貢獻。

我不會學習Javascript來找到整理其可以或可以不包含元素片段的替代機制。我知道JavaScript有很多優點，但是DOM編碼似乎並不是其中之一。

來源

2016-11-11 11:39:23 Gavin

Javascript getElementsByTagName - 包含嵌入元素

回答

相關問題