jtopo node.text换行_在textnode内的网页上创建换行符-Javascript

I've seen a few responses to this question but the suggestions did not solve my output issue. A form takes input and prints to the webpage like so:

function init() {

var div = document.createElement("div");

div.id = "output";

var name = document.getElementById("name").value;

name.type = "text";

var address = document.getElementById("address").value;

address.type = "text";

var city = document.getElementById("city").value;

city.type = "text";

var state = document.getElementById("state");

state.type = "text";

var index = state.selectedIndex;

var fullState = state.options[index];

var zip = document.getElementById("zip").value;

zip.type = "text";

var email = document.getElementById("email").value;

email.type = "text";

var areaCode = document.getElementById("areaCode").value;

areaCode.type = "text";

var prefix = document.getElementById("prefix").value;

prefix.type = "text";

var suffix = document.getElementById("suffix").value;

suffix.type = "text";

var gender = document.getElementById("gender").value;

/*

var courses = document.getElementById("courses").value;

courses.type = "text";

var aj = document.getElementById("aj").value;

aj.type = "text";

var asp = document.getElementById("asp").value;

asp.type = "text";

var php = document.getElementById("php").value;

php.type = "text";

*/

var br = document.createElement('br');

var printName = document.createTextNode("Name: " + name + " ");

var printEmail = document.createTextNode("Email: " + email + " ");

var printPhone = document.createTextNode("Phone: " + areaCode + "-" + prefix + "-" + suffix);

var printAddress = document.createTextNode("Address: " + address + " " + city + " " + fullState.text + " " + zip);

var printGender = document.createTextNode("Gender: " + gender + " ");

//var printCourses = document.createTextNode("Courses Taken:" + courses + " ");

div.appendChild(printName);

div.appendChild(br);

div.appendChild(printEmail);

div.appendChild(br);

div.appendChild(printPhone);

div.appendChild(br);

div.appendChild(printAddress);

div.appendChild(br);

div.appendChild(printGender);

div.appendChild(br);

//div.appendChild(printCourses);

div.appendChild(br);

var output = document.getElementById("output");

if(output) {

output.parentNode.replaceChild(div, output);

} else {

document.body.appendChild(div);

}

}

The output is still just one continuous line on the webpage despite having created the line break element. Any other suggestions?

解决方案

When you do

var br = document.createElement('br');

you have a reference to a SINGLE element. So when you do this:

div.appendChild(printName);

div.appendChild(br);

div.appendChild(printEmail);

div.appendChild(br);

You are saying "add the printName element, then add this
element after it. Now, create the printEmail element, then MOVE that same
element after it."

So in the end, you still have just ONE
element, after everything else.

The fix that probably involves the least code change is something like:

function br() {

return document.createElement('br');

}

div.appendChild(printName);

div.appendChild(br());