使用JavaScript，將換行符插入HTML textContent屬性（特定於IE）

Question

我正在使用JavaScript生成動態SVG圖像。 我的意圖是讓特定區域的工具提示中包含信息。 我至今工作於Chrome和Firefox的，但只有在IE 11

部分如果我使用的textContent，"\r\n"在IE中被忽略，<br />字面上顯示。

的innerHTML似乎是答案從以前問類似的問題：
Question 9330671
Question 9980416

通常情況下，切換到的innerHTML會解決這個問題，但IE不支持的innerHTML這個特定使用，所以根本不顯示文字。

無論使用的innerHTML或的textContent作品Chrome或Firefox，如此反覆，這只是在IE的問題（與IE 11測試）。向所有必須使用此瀏覽器測試所提供代碼的人道歉。

交互代碼可在http://jsfiddle.net/rnhy9pus/。

另外，完整的代碼包含如下：

function createPathContent(svgID, popupText, pathDirections) 
 
{ 
 
    var path = document.createElementNS("http://www.w3.org/2000/svg","path"); 
 
    path.setAttribute("d",pathDirections); 
 
    var popup = document.createElementNS("http://www.w3.org/2000/svg","title"); 
 
    popup.textContent = popupText; // <-- LINE TO FOCUS ON 
 
    path.appendChild(popup); 
 
    document.getElementById(svgID).appendChild(path); 
 
} 
 
function createPathHTML(svgID, popupText, pathDirections) 
 
{ 
 
    var path = document.createElementNS("http://www.w3.org/2000/svg","path"); 
 
    path.setAttribute("d",pathDirections); 
 
    var popup = document.createElementNS("http://www.w3.org/2000/svg","title"); 
 
    popup.innerHTML = popupText; // <-- LINE TO FOCUS ON 
 
    path.appendChild(popup); 
 
    document.getElementById(svgID).appendChild(path); 
 
} 
 
function createExample(svgID) 
 
{ 
 
    document.getElementById(svgID).setAttribute("xmlns", "http://www.w3.org/2000/svg"); 
 
    document.getElementById(svgID).setAttribute("version", "1.1"); 
 
    document.getElementById(svgID).setAttribute("width", "300"); 
 
    document.getElementById(svgID).setAttribute("viewBox", "0 0 100 100"); 
 
    document.getElementById(svgID).setAttribute("preserveAspectRatio", "xMinYMin meet"); 
 

 
    var style = document.createElement("style"); 
 
    style.setAttribute("type","text/css"); 
 
    style.innerHTML = "path { fill: #ccc; } path:hover { fill: #ff0; }"; 
 
    document.getElementById(svgID).appendChild(style); 
 

 
    var NEW_LINE = "\r\n"; 
 
    //var NEW_LINE = "<br />"; // This displays literally in textContent and as a new line in innerHTML. 
 

 
    createPathContent(svgID, "Tooltip text using textContent:" + NEW_LINE + "New Line", "M 10 10 L 90 10 L 90 45 L 10 45 Z"); 
 
    // Works correctly in Chrome or Firefox. Displays in IE 11, but only on a single line. 
 

 
    createPathHTML(svgID, "Tooltip text using innerHTML:" + NEW_LINE + "New Line", "M 10 55 L 90 55 L 90 90 L 10 90 Z"); 
 
    // Works correctly in Chrome or Firefox. Does not display in IE 11. 
 
} 
 

 
createExample("exampleSVG");

<svg id="exampleSVG" xmlns="http://www.w3.org/2000/svg"></svg>

Answer 1

function createPathContent(svgID, popupText, pathDirections) 
    { 
     var path = document.createElementNS("http://www.w3.org/2000/svg","path"); 
     path.setAttribute("d",pathDirections); 
     var popup = document.createElementNS("http://www.w3.org/2000/svg","title"); 
    // popup.textContent = popupText; // <-- LINE TO FOCUS ON 
popup.textContent=" " 
//popup.firstChild.nodeValue=popupText 
popup.firstChild.nodeValue='Edgar' 
Node.prototype.appendChild.call(popup, document.createElement("br")) 
Node.prototype.appendChild.call(popup, document.createTextNode('Allen Poe.')) 
     path.appendChild(popup); 
     document.getElementById(svgID).appendChild(path); 
    } 

它總是讓我目瞪口呆，當我試圖找出是否的textContent正式應該解釋\ n（\ X0A \ u000A ...），除了空白什麼。

的textContent：
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent

界面上的文字：
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1312295772

接口CharacterData：
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-FF21A306

無論如何，我做了一些原語的鍛鍊，上面。我希望你能像我一樣發現這一點。它在一行中生成「Edgar」的工具提示，以及「Allen Poe」。在下。

function createPathContent(svgID, popupText, pathDirections) 
{ 
    var path = document.createElementNS("http://www.w3.org/2000/svg","path"); 
    path.setAttribute("d",pathDirections); 
    var popup = document.createElementNS("http://www.w3.org/2000/svg","title"); 
    //popup.textContent = popupText; // <-- LINE TO FOCUS ON 

      popupText= popupText.split('\n')             // note: firefox needs "\r" passed in "\r\n". 
      while (true) { popup.appendChild(document.createTextNode(popupText.shift()))  // note: "" here is ok, will be appended as empty #text node 
         if (popupText.length) popup.appendChild(document.createElement("br")) 
         else break } 

    path.appendChild(popup); 
    document.getElementById(svgID).appendChild(path); 
} 

這裏的函數內部工作補丁。它使用喬納森的華麗技巧，即Firefox需要「\ r」，而IE和Chrome對<br>感到滿意。

Answer 2

至於SVG而言，innerHTML財產還沒有完全落地還，但已經很接近了。目前Chrome和Firefox都在Element界面支持它，但Internet Explorer不支持。鑑於其條件，Mozilla開發者網絡提供the following warning：

Internet Explorer小組確實有提起考慮在未來將提供類似支持內部票建立的Internet Explorer。在此之前，有一種方法可以在IE，Chrome和Firefox中實現換行。我不得不提醒你，在這一點後面說謊龍（我們即將做一些非標準的東西，可能會在未來完全崩潰，我們再也不會說這個了））。

我們首先創建一個至少包含三個元素的文檔片段：兩行文本，用<br>元素分隔。

var fragment = document.createDocumentFragment(); 

fragment.appendChild(document.createTextNode("First Line\r")); 
fragment.appendChild(document.createElement("br")); 
fragment.appendChild(document.createTextNode("Second Line")); 

接下來，讓我們直接傳遞片段插入到createPathContent方法：

createPathContent(svgID, fragment, "M 10 10 L 90 10 L 90 45 L 10 45 Z"); 

最後，讓我們追加片段作爲一個孩子的<title>元素：

popup.appendChild(popupText); 

以上給出了該行的一致表示當你將鼠標放在元素上時。再一次請注意，提供的工具提示是一個基本上不可預測的野獸。我們今天看到的結果可能會在未來發生變化。

小提琴：http://jsfiddle.net/rnhy9pus/4/