如何用多行文本显示从JavaScript到HTML的文本

Question

我想使用循环显示从JavaScript到HTML的多行文本。 文字位置在显示图像之后。 文本结果应类似于Place ..... //换行价格....

<div id="display">
            <script type="text/javascript" src="../controler/package.js"></script>
</div>


var display = document.getElementById('display');

function  buildImages(images,place,k,price){
 var last=document.createElement("IMG");
    last.src=images;
    last.width=800;
    last.height=600;
    last.style.marginTop=30;
    display.appendChild(last);

    var x = document.createElement("H3");
    var t = document.createTextNode("Place:"+place);
    var z = document.createTextNode(" price:"+price);
    x.appendChild(t);
    x.appendChild(z);
    display.insertBefore(x,display.childNodes[k]);

Answer 1

最干净的方法可能是执行与HTML相同的操作：将文本节点包装在<p>元素中。

将文本包装在HTML元素中将始终在以后帮助您自定义样式或其他内容！

原始文本节点不是那么方便。

Answer 2

有多种方法可以实现此目的。 一种是使用br标签

var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place);
var br = document.createElement("BR");
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(br);
x.appendChild(z);

另一个可能是使用pre标签

var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place + "\n price:" + price);
x.appendChild(t);

或者，您可以使用两个显示的跨度：block;

var x = document.createElement("H3");
var t = document.createElement("SPAN");
t.style.display = "block";
t.innerText = "Place:" +place;
var z = document.createElement("SPAN");
z.style.display = "block";
z.innerText = "Price:" +price;
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(z);

Answer 3

通过设计它不能像这样工作。 如果你不使用

 <pre> 

要么

 <code> 

如果您想使用换行符，或者您喜欢其他标签，例如

 <p>

那你至少要用

  <br> 

这样，您仍然可以根据需要设置文本格式。 通常看起来会有点混乱。 我会用一张桌子。