使用 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

就 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/

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 对
感到满意。