Return JQuery objects into DOM using Append

Question

I have created a function createFileSelect() which creates elements:

function createFileSelect() {

    var fSpan = $("<span/>",
        {
            "id" : "fileUpload-span",
            "class" : "btn btn-add",
            "text" : "Add a file.."
        }); 

    var fInput = $("<input/>", {
        "type": "file",
        "name": "files[]",
        "id": "fileUpload"       
    });

    return $(fSpan + fInput);
}

Then I call this using:

$("#fileUpload-holder").append(createFileSelect());

However, I am getting an error

Syntax error, unrecognized expression: [object Object][object Object]

How can I get this working with the (2) elements into the dom using a function?

Thanks

Joseph Silber · Accepted Answer · 2012-11-13 17:27:58Z

2

Change the return statement to use jQuery's .add method:

return fSpan.add(fInput);

If you want the input within the span, use this instead:

return fSpan.append(fInput);

answered Nov 13, 2012 at 17:27

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nelson Benítez León · Accepted Answer · 2012-11-13 17:28:01Z

0

Replace your following line:

return $(fSpan + fInput);

for this one:

return fSpan.add(fInput);

answered Nov 13, 2012 at 17:28

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Comments

Renato Zannon · Accepted Answer · 2012-11-13 17:29:27Z

0

The + operator is not defined for objects in javascript, so they are coerced to strings first (which is the "[object Object][object Object]" string). Then, as you pass the string to the $ function, it tries to interpret it as HTML, which in turn generates the syntax error you are seeing.

To merge two jQuery objects together, you can use the .add() function, that returns a new object that contains both:

return fSpan.add(fInput);

answered Nov 13, 2012 at 17:29

Renato Zannon

30.2k7 gold badges42 silver badges47 bronze badges

Collectives™ on Stack Overflow

Return JQuery objects into DOM using Append

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related