在textnode内的网页上创建换行符-Javascript [英] Create Linebreak on webpage within a 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?

推荐答案

执行时

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

您有一个SINGLE元素的引用.因此，当您执行此操作时:

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

您说的是添加printName元素，然后在其后添加此<br>元素.现在，创建printEmail元素，然后将相同的<br>元素移动到其后."

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

所以最后，在其他所有内容之后，您仍然只有一个<br>元素.

So in the end, you still have just ONE <br> 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());

这篇关于在textnode内的网页上创建换行符-Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！