使用JQUERY文本功能将文本区域中的内容替换为DIV时，br标签不起作用

Question

The br tag is not working on DIV. I am getting the message from Update Content: textarea field. The message have the 2 lines like "Rama" next line "Lingam". But the result is "Rama
Lingam" by $("#editQuotesRowLabel_Q_013").text(replaceContent);

How to make a new line in DIV?

Here is my code:

function updateQuotes(){    
    var weg_quotes = $("#weg_quotes_Q_013").val();  
    replaceContent = weg_quotes.replace("\n", "<br>", "g");         
    $("#editQuotesRowLabel_Q_013").text(replaceContent);
}

Update Content: <textarea placeholder="Update your content..." id="weg_quotes_Q_013" name="weg_quotes" cols="80" rows="3" class="appQuotesTextarea" maxlength="200" required=""></textarea>
<button onclick="updateQuotes()" id="Q_013" name="update-btn" class="appQuotesBtn">Update</button>

<div id="editQuotesRowLabel_Q_013" class="appQuotesLabel">
    This is content div. 
</div>

Answer 1

To insert HTML content using jquery you need to use .html() instead of .text() . So in your case you end up with :

 $("#editQuotesRowLabel_Q_013").html(replaceContent);
 //                              |_ use html() instead of text()

Source :

• .html()
• .text()

Answer 2

Just use .html() instead of .text() because textarea content will also contain
tags and .html() can show html also, .text() will only consider text - it will not set html tags (
tag here) in div, so use .html() instead of .text()

 function updateQuotes(obj){ var weg_quotes = $("#weg_quotes_Q_013").val(); replaceContent = weg_quotes.replace("\\n", "<br>", "g"); $("#editQuotesRowLabel_Q_013").html(replaceContent); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> Update Content: <textarea placeholder="Update your content..." id="weg_quotes_Q_013" name="weg_quotes" cols="80" rows="3" class="appQuotesTextarea" maxlength="200" required=""></textarea> <button onclick="updateQuotes(this)" id="Q_013" name="update-btn" class="appQuotesBtn">Update</button> <div id="editQuotesRowLabel_Q_013" class="appQuotesLabel"> This is content div. </div> 

Answer 3

Try with this:

$("#editQuotesRowLabel_Q_013").html(replaceContent);

// Try to use html() instead of text()

This will allow you to use html tags :)

Answer 4

I am not sure what that replace() method is, but it replace is

str.replace(pattern/string, function/replacement)

So your code should be

replaceContent = weg_quotes.replace(/\n/g, "<br>");  

and you should be using .html() when you are inserting html into a div.

$("#editQuotesRowLabel_Q_013").html(replaceContent);

Answer 5

试试这个.html()而不是.text()

$("#editQuotesRowLabel_Q_013").html(replaceContent);