2

我正在为学校做作业。我的一切都按应有的方式工作。唯一错误的是输出的格式。我不明白为什么我会收到按原样格式化的输出。我正在使用 javascript，我正在创建节点并将它们作为子元素附加。我的主要目标是对每条信息进行格式化并放在自己的行上。这是我的 javascript 函数。

function createUserid()

     {
     var firstString = window.prompt ( "Enter first name", "" ); 
             //documentwrite
              var lower = firstString.toLowerCase();
             // firstString.substring(0,4)
             // firstString.concat
     var lastString = window.prompt ( "Enter last name", "" );
     var lowlast = lastString.toLowerCase();
     var socialString = window.prompt ( "Enter social security number without dashes", "" );

     var ln = lowlast.substring(0,4);       //first 4 of last name
     var ls = socialString.substring(5,9);  //last 4 of social
     var fs = socialString.substring(0,5);  //first 5 of social
     var fn = lower.substring(0,4);         //first 4 of first name


             //var user = docoument.write("<p>" + "Username: " + lastString +
             //var pass = <p>"Password: " +

             //var myDiv = document.getElementById('here');
             //myDiv.innerHTML = ____ ;


        var e = document.getElementById('info');
        var o = document.getElementById('here');

        //creating 2 elements: p, br
        var newPara = document.createElement('p');
        var tBR = document.createElement('br');

        //prepare text nodes
        var first = document.createTextNode('First name: ' + firstString);
        var last = document.createTextNode('Last name: ' + lastString);
        var social = document.createTextNode('Social Security #: ' + socialString);
        var userN = document.createTextNode('Username: ' + ln + ls);
        var passW = document.createTextNode('Password: ' + fs + fn);

        //put together paragraph            
        newPara.appendChild(first);
        newPara.appendChild(tBR);
        newPara.appendChild(last);
        newPara.appendChild(tBR);
        newPara.appendChild(social);
        newPara.appendChild(tBR);
        newPara.appendChild(userN);
        newPara.appendChild(tBR);
        newPara.appendChild(passW); 

        //insert into div id of info
        document.getElementById('info').appendChild(newPara);





        o.style.display = 'none';
        e.style.display = 'block';      

    }

这是我收到的输出在此处输入图像描述

这就是输出的样子。在此处输入图像描述

4

3 回答 3

8

您一次又一次地附加相同的节点。

newPara.appendChild(first);
    newPara.appendChild(tBR);
    newPara.appendChild(last);
    newPara.appendChild(tBR);  <--- this node gets moved, since you append it again.
    newPara.appendChild(social);
    newPara.appendChild(tBR);
    newPara.appendChild(userN);
    newPara.appendChild(tBR);  <--- this is where tBR will be at last.
    newPara.appendChild(passW);

而是这样做：

 var first = document.createTextNode('First name: ' + firstString + '<br/>');

或这个 ：

        newPara.appendChild(first);
        newPara.appendChild(document.createElement('br'));
        newPara.appendChild(last);
        newPara.appendChild(document.createElement('br'));  
 .................................

此处的文档： https ://developer.mozilla.org/en-US/docs/DOM/Node.appendChild

将一个节点添加到指定父节点的子节点列表的末尾。如果节点已经存在，则将其从当前父节点中删除，然后添加到新的父节点。

于 2013-04-12T08:21:16.303 回答
1

如果child已经插入，element.appendChild(child)则在将其插入新位置之前将其从原来的位置移除。

用于node.cloneNode(true)制作孩子的副本，或者只是document.createElement('br')一次又一次地使用（可能循环使用以避免重复自己）。

于 2013-04-12T08:25:33.167 回答
0

尝试这个：

var first = document.createTextNode('First name: ' + firstString + '<br>');
var last = document.createTextNode('Last name: ' + lastString + '<br>');
var social = document.createTextNode('Social Security #: ' + socialString + '<br>');
var userN = document.createTextNode('Username: ' + ln + ls + '<br>');
var passW = document.createTextNode('Password: ' + fs + fn + '<br>');
于 2013-04-12T08:24:15.537 回答