Question

我在javascript中插入了几个textNodes，并且无法弄清楚如何用回车分隔它们。我试过把“\ 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行的节点

不是

第2行的第1Node节点

关于如何实现这一目标的任何提示？

Answer 1

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

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

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

Answer 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/>");

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

Answer 5

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

Answer 6

您可以执行以下操作：

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

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

6 个答案: