Question

I’m trying to build a simple JQ Plugin with input and a button:

(function ($) {
    var methods = {
        init: function (options) {
            var settings = $.extend({
                'label': 'File'
            }, options);

            return this.each(function () {
                var $this = $(this);
                $this.append = $('<label>' + settings.label + ':</label>');
                $this.append = $('<input type="text" id="textInput">');
                $this.append = $('<button>browse..</button>');
            });
        }
    };

    $.fn.openFileDialog = function (method) {
        // Method calling logic
        if(methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if(typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.openFileDialog');
        }
    };
})(jQuery);

I’ve also tried to create elements using document.createElement(). In both cases nothing is created inside the target element. What am I missing here?

Answer 1

• demo: http://jsbin.com/otemac

maybe?

$this.append('<label>' + settings.label + ':</label>'+'<input type="text" id="textInput">'+'<button>browse..</button>');

OR

$('<label>' + settings.label + ':</label><input type="text" id="textInput"><button>browse..</button>').appendTo($this);