Question

I would like to be able to assign an html element to a variable and then to work with it just like I’m working with the actual DOM element.

In this example, I want it so when showAlert() function gets called, it’ll take the ID that is being passed, show the div, since it’s default is hidden and set a text value inside the DIV.

What is the best way to do this?

HTML:

<div class="alert" id="myCustomAlert12345" style="display:none" >
</div>

Javascript:

function showAlert(alertDivID, alertMessage, alerttype){        
        if(alertDivID&& alertMessage){
            currentDiv = $('#'+alertDivID);             
            currentDiv.show();
            currentDiv.html(alertMessage);
        }
}

showAlert("myCustomAlert12345","some error message goes here","error");

Answer 1

You can pass jQuery objects into a function.

var showAlert = function ($el, mes){                   
    $el.show();
    $el.append('<p>'+ mes +'</p>');
};

showAlert($('.item'), 'My Message');