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

上面给出了当您将鼠标悬停在元素上时线条的一致表示。再次注意，呈现的工具提示在很大程度上是不可预测的野兽。我们今天看到的结果将来可能会改变。

Fiddle: 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

Interface Text:
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1312295772

Interface 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 对
很满意。

使用 JavaScript，将换行符插入 HTML textContent 属性（特定于 IE）

Using JavaScript, insert a line break into a HTML textContent attribute (IE specific)

javascript

internet-explorer

svg

newline

innerhtml