divにテキストを追加します。新しい行

Question

新しい行の "キー"（@ n）でページにテキストがあり、 "キー"を新しい行として変更し、このテキストを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

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>

をあなたはテキストを追加する.html()を使用する必要があります。

セキュリティメモ：html()を使用すると、表示するテキストをユーザーが変更できる場合、サイトがクロスサイトスクリプティングによって脅かされる可能性があります。

---

代わりに、あなたはまた、<pre>タグやwhite-space: pre;のcss attribteを使用することができます。

Answer 2

代わりの\n、あなたは<br />を使用することができますし、代わりにtext()、あなたが使用する必要があります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>