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

Question

我正在使用JavaScript生成動態SVG圖像。 我的目的是讓特定區域的工具提示中包含信息。 到目前為止，我在Chrome和Firefox中都有效，但僅部分在IE 11中。

如果我使用textContent ，則在IE中忽略"\\r\\n"並按字面顯示<br /> 。

innerHTML似乎是之前提出的類似問題的答案：
問題9330671
問題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

就SVG而言， innerHTML屬性還沒有完全落地，但它已經接近了。 目前Chrome和Firefox都支持Element接口，但Internet Explorer卻不支持。 鑒於其條件，Mozilla開發者網絡提供以下警告 ：

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/

Answer 2

    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);
}

這是函數本身內的一個工作補丁。 它利用了Jonathan的光滑技巧，Firefox需要“\\ r”，而IE和Chrome對於它們很滿意。