multiple elements in .html()

Question

I have to objects: object S and oject SD.

//form group startTime
formStart = $(fstart).clone();
s = $(d).clone();
    $(s).addClass('input-group date datetimepicker-s').html(startTime);

sd = $(d).clone();
    $(sd).addClass('input-group date datetimepicker-s').html(startDate);

And I want to put them in the same group on this way:

$(formStart).html(s,sd).prepend('<label>Begintijd</label>');

But maybe it is very obvious, this isn't working. My question is, is it possible to add multiple elements into .html() or is it possible to do this:

$(element).html().html();

Answer 1

You shouldn't use .html() at all when you want to pass jQuery objects. Use .append(), instead, which accepts an array of elements or a variable number of arguments:

formStart.append(s, sd)

If you want to empty the parent element first (replicate the behavior of .html()), use .empty() (what surprise):

formStart.empty().append(s, sd)

---

Also note that .clone returns a jQuery object, so formstart is already a jQuery object and you should use formStart instead of $(formStart). Same for s and sd. If you are not very familiar with jQuery's basics, I recommend to read the jQuery tutorial: https://learn.jquery.com/.