2

I have one div with a temporal text, once other images are clicked I want to show a different text, for this I'm using the .text on javascript call, I can replace the text, my problem is that I can't create spaces or paragraph breaks. Can someone explain me how to implement it?

$("#memberTrigger").click(function() {
  $("#memberDescriptionResponsive").text('This is the Large Description I want to appear within that text area defined previously. After this dot I would like to have a break of paragraph and continue in a secondary one, right now is showing on the same line as continuity');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="memberDescriptionResponsive">Some Information of the Team Member</h3>
<div id="memberTrigger"></div>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
Eu2019
  • 81
  • 7
  • 1
    `text` is plain text, if you want markup that you have to use `html`. – epascarello Jan 29 '19 at 12:57
  • 1
    Possible duplicate of [What is the difference between jQuery: text() and html() ?](https://stackoverflow.com/questions/1910794/what-is-the-difference-between-jquery-text-and-html) – Mr. Polywhirl Jan 29 '19 at 12:58

3 Answers3

1

text is for:

Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements. http://api.jquery.com/text/

And you should use html

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters http://api.jquery.com/html/

$("#memberDescriptionResponsive").html('<span style="background:red">This is the Large Description</span><br>I want to appear within that text area defined previously. After this dot I would like to have a break of paragraph and continue in a secondary one, right now is showing on the same line as continuity');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="memberDescriptionResponsive">hey</div>
MakeLoveNotWar
  • 956
  • 9
  • 25
0

The text method inserts text. Just text. Not elements. If you want an element, then you need to use something else.

First, you need to change the h3 to something different. No HTML heading element is allowed to contain a paragraph.

Then you can use empty to clear the existing content and append to add new elements.

var heading = $("<h3 />").text("This is the Large Description I want to appear within that text area defined previously.");
var paragraph = $("<p />").text("After this dot I would like to have a break of paragraph and continue in a secondary one, right now is showing on the same line as continuity");

$("#memberDescriptionResponsive").empty().append([heading, paragraph]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="memberDescriptionResponsive"><h3>Some Information of the Team Member</h3></div>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

You can add <br> in between where you want to add the break. but instead of using text you got to use .html

$("#memberTrigger").click( function() {
$("#memberDescriptionResponsive").html('This is the Large Description<br> I want to appear within that text area defined previously.<br> After this dot I would like to have a break of paragraph and continue in a secondary one, <br>right now is showing on the same line as continuity')});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="memberDescriptionResponsive">Some Information of the Team Member</h3>
<div id="memberTrigger">a</div>
ellipsis
  • 12,049
  • 2
  • 17
  • 33