如何在换行符上插入 javascript textNode 元素答案

【问题标题】：How to insert a javascript textNode element on a newline如何在换行符上插入 javascript textNode 元素
【发布时间】：2011-11-16 05:59:12
【问题描述】：

我在 javascript 中插入了几个 textNode，但不知道如何用回车分隔它们。我试过输入“\n”、“\r”和“
”，但它们都不起作用

var textNode = document.createTextNode("Node on line 1");
element.appendChild(textNode);

textNode = document.createTextNode("Node on line 2");
element.appendChild(textNode);

我希望它显示为：

第 1 行的节点

第 2 行的节点

不是

第 1 行的节点第 2 行的节点

关于我如何做到这一点的任何提示？

【问题讨论】：

HTML 中会忽略换行符。您必须使用 <br> 标记来开始新的文本行。
正确答案见下方链接：enter link description here

标签： javascript

【解决方案1】：

使用<br> 将它们分开，像这样

var br = document.createElement("br");
element.appendChild(br);

【讨论】：

这就像一个魅力。请注意，您还可以添加 'element.appendChild(br);'多次向您的元素添加多行而不创建相同的变量。 :)
当我最近这样做时它没有工作。我不得不使用 appendChild(br.cloneNode()); ，请参考此stackoverflow.com/a/37845001/14360570

【解决方案2】：

渲染引擎不考虑渲染换行和回车。如果你像这样使用<br /> 会更好：

var textNode = document.createTextNode("Node on line 1");
element.appendChild(textNode);

var linebreak = document.createElement('br');
element.appendChild(linebreak);

var linebreak = document.createElement('br');
element.appendChild(linebreak);

textNode = document.createTextNode("Node on line 2");
element.appendChild(textNode);

谢谢Doug Owings。还有http://jsfiddle.net/Q8YuH/3/

【讨论】：

空白的处理在HTML 4.01 specification中定义。标记中的空格被折叠成一个空格，并且只包含空格的元素可能会将其完全删除。鉴于 Web 上的绝大多数内容是 HTML，甚至具有 XHTML DOCTYPE 的文档也作为 HTML 提供（因此被浏览器视为 HTML 文档），BR 元素的适当标记是
.

【解决方案3】：

让它变得完美。

function addText(node,text){     
         var t=text.split(/\s*<br ?\/?>\s*/i),
             i;
         if(t[0].length>0){         
           node.appendChild(document.createTextNode(t[0]));
         }
         for(i=1;i<t.length;i++){
            node.appendChild(document.createElement('BR'));
            if(t[i].length>0){
              node.appendChild(document.createTextNode(t[i]));
            }
         } 
}            
addText(document,"Line 1 <br> Line 2<br/>line 3<BR/>");

【讨论】：

【解决方案4】：

var textNode = document.createTextNode("Node on line 1");
element.appendChild(textNode);

var linebreak = document.createElement('<br >');
element.appendChild(lineBreak);

textNode = document.createTextNode("Node on line 2");
element.appendChild(textNode);

【讨论】：

【解决方案5】：

我的猜测是您试图在 HTML 视图而不是 TEXT 视图中单独显示它们，在这种情况下，您需要通过 document.createElement('br') 在文本节点之间插入 <br /> 标记以将它们显示在单独的行上。使用 \r 或 \n 只会影响它在源视图中的外观。

【讨论】：

【解决方案6】：

你可以这样做：

document.body.appendChild(document.createElement("textContentID").innerHTML = "Text 1 <br/> Text2");

【讨论】：

这不是有效的 JavaScript。