将html标记作为文本输出到div中，每个数组元素在单独的行上

Question

我在javascript文件中有一个名为newElements的数组。

格式喜欢这个：

newElements: Array[3]
0: "<p class='Day'>asdasd</p>"
1: "<p class='Day'>123123</p>"
2: "<p class='Day'>Test</p>"
length: 3

我有一个div.panel-body。

我做的是

for( var i = 0; i < newElements.length; i++) {
new_content += newElements[i];
}
$(".panel-body").text(new_content);

它给我的输出看起来像这样：

但是，我想要这样的div格式：

<p class="Day">Some Text</p>
<p class="Day">Another Text</p>
<p class="Session">TEXT</p>

每个html标记位于单独的一行。

是的，我知道<br>标记，但问题是，如果我添加<br>，<br>标记将被视为纯文本，输出将变为像这样：<p class="Day">asdasd</p><br><p class="Day">asds</p>

那么，有人可以给我一个很好的方式来显示输出以我想要的方式进行筛选。你已经有了我给你的阵列。

如果我使用html（）函数，<p>将被视为真正的html标记，这不是我想要的，我希望它们被显示。

Answer 1

如果您不想显示代码而不是.text()，请使用.html()。

小提琴：http://jsfiddle.net/q4AeR/

我的错误。由于您希望显示实际代码，因此在循环内将每个代码添加到其自己的新元素中。这是我能想到的最好的：

小提琴：http://jsfiddle.net/Hb9mC/

Answer 2

尝试

for( var i = 0; i < newElements.length; i++) {
    $(".panel-body").append(document.createTextNode(newElements[i])).append('<br/>');
}

http://jsfiddle.net/9z3zE/1/

Answer 3

我假设您要显示包含换行符的代码。将HTML转换为实体并添加换行符：

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

var newElements = ['<p class="Day">asdasd</p>,<p class="Day">123123</p>,<p class="Day">Test</p>'],
    output = '';

for(var i = 0; i < newElements.length; i++) {
  output += htmlEntities(newElements[i]) + '<br />';
}

$('.panel-body').html(output);

http://jsbin.com/mefuhufo/1/edit

Answer 4

<div class="hello">

</div>

   

<script>
var mycars = new Array();
mycars[0] = "<p class='Day'>Hello Xinrui Ma</p>";
mycars[1] = "<p class='Day'>this is the array</p>";
mycars[2] = "<p class='Day'>hopes it fits your need</p>";

 var divHello = $('div.hello')
$.each(mycars, function( index, value ) {
 divHello.append(value);
});

</script>