将文本添加到div。新队

Question

我的页面中有一个文本，其中“key”（@ n）为新行，我必须将“key”更改为新行并将此文本添加到我的div中。我找不到如何：

var original= "the text @n to change";
var changed = original.replace(/@n /g, '\n ');

$('#theText').text(changed)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="theText">

</div>

我该怎么做？

Answer 1

In HTML normal linebreaks won't work in most cases. Instead use the <br /> tag.

Your code, updated:

var original= "the text @n to change";
var changed = original.replace(/@n /g, '<br />');

$('#theText').html(changed)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="theText">

</div>

You have to use .html() to add the text.

Security note: By using html() your site is potentially threatened by cross site scripting if users can modify the text you want to display.

---

Alternatively you can also use the <pre> tag or the white-space: pre; css attribte.

Answer 2

Instead of \n, you can use <br /> and instead of text(), you will have to use html()

var original= "the text @n to change";
var changed = original.replace(/@n /g, '<br /> ');

$('#theText').html(changed)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="theText">

</div>

Answer 3

我认为，如果你使用.html（）和br来实现它会起作用

var original= "the text @n to change";
var changed = original.replace(/@n /g, '<br />');

$('#theText').html(changed)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="theText">

</div>