jquery - How to insert text into existing text in a div using jQuery

Question

I'm using jQuery 1.8.2 with a jsp and I'm trying to get text dynamically inserted into a div. Here is what I've tried:

var selectButton = "Your " + $(this).val();
alert("The selectButton value is: ")
$('#submitMsg').prepend(selectButton);
$('#submitMsg').show();
    ...         

<p/>
<div id="submitMsg" style="display: none;"><h3> request is being submitted..</h3></div>
<p/>
<div id="trueDiv" style="display: none;"><h3> request was successful!</h3></div>
<div id="falseDiv" style="display: none;"><h3> request was not successful!</h3></div>

I want to dynamically pass in which request, based on which submit button was clicked, to the message div. Then I want to use that same text value and insert it into the request message confirmation, based on the result of the web service call, still using the same size font, but I've been unable to do this.

Using .prepend doesn't seem to merge the text well, so I need something that will directly insert it into the text of the div. What should I be using?

After I got the answer here I found a tutorial at this link. Should be helpful for similar tasks.

Answer 1

Instead of using .prepend use .text or .html. .prepend is for DOM elements, not strings. You can retain the rest of the current text like so:

$("#submitMsg").html("Your " + $(this).val() + $("#submitMsg").html());

Answer 2

Use .html() or .text() to get the existing content and then add them together.

var html = $("#submitMsg").html();
html = selectButton + html;
$("#submitMsg").html(html);