将文本追加到内部HTML

Question

I've seen the following syntax in pre-existing code.

$("#offers").children().last().html(
  $("#offers").children().last().html() + "!");

Is there a smoother approach to append some text to the HTML? Is there also a nicer way to refactor the following?

$("#offers").children().last().html(
  "!" + $("#offers").children().last().html());

And how about this?

$("#offers").children().last().html(
  "!" + $("#offers").children().last().html() + "!");

My suggestion is the following but I'd like to see if there's something even neater.

var old = $("#offers").children().last().html();
var prefix = "";
var suffix = "";
$("#offers").children().last().html(suffix + old + prefix));

Answer 1

You can use prepend and append

$('#offers').children().last().prepend("!");
$('#offers').children().last().append("!");

Answer 2

You can do this:

$("#offers").children().last().html(function(index, oldHtml){
    return oldHtml + '!';
});

or as per your suggestion:

var prefix = "!";
var suffix = "!";
$("#offers").children().last().html(function(index, oldHtml){
    return suffix + oldHtml + prefix;
});

Answer 3

You can simply use ".append()" method provided by jQuery. ( Api append() )

Try:

$("#offers").children().last().append("!");

Answer 4

try something like this

    // Simply remove one time from DOM.
     var elem = $("#offers").children().last();
     var old_html = elem.html();
     var prefix = "";
     var suffix = "";
     elem.html( suffix + old_html + prefix);

Answer 5

You can fetch the DOM object with jQuery.get() method and use good old innerHTML :

$("#offers").children().last().get(0).innerHTML += "!";

Or you can use jQuery.append()

$("#offers").children().last().append('!');

In the second case use jQuery.prepend()

$("#offers").children().last().prepend('!');