Create Bootstrap alert in JQuery

I'm new to bootstrap and was using noty before to generate alerts, however I'd like to try and do this without adding more plugins because bootstrap is already somewhat heavy in loading. I can create the text easily enough, it's just when I add the class in.

This is my Jquery:

$(function(){
        $("#passsubmit").click(function(event){
        event.preventDefault();
        $(".error").hide();
        var hasError = false;
        var newpass = $("#password").val();
        var checkVal = $("#password-check").val();
        if (newpass == '') {
            $("#password").after('<span class="error">Please enter a password.</span>');
            hasError = true;
        } else if (checkVal == '') {
            $("#password-check").after('<span class="error">Please re-enter your password.</span>');
            hasError = true;
        } else if (newpass != checkVal ) {
            $("#password-check").after('<span class="error">Passwords do not match.</span>');
            hasError = true;
        }

        if(hasError == true) {return false;}

        if(hasError == false) {
        	    $.ajax({
        		type: "POST",
        		url: "resource/changepassword.php",
        		data: {newpass:newpass},
        		success: function(){
        			//alert("Password Changed");
        			$("#password").val("")
        			$("#password-check").val("");
                    $(document.createElement('<div class="alert alert-success">Password Changed</div>'));
        		}
    			});

        };
    });
});

This is the part it is failing on due to an invalid character, which I assume is the "

$(document.createElement('<div class="alert alert-success">Password Changed</div>'));

I know that I could simply have this in the html:

<div class="alert alert-success" style="visibility: hidden">Password Changed</div>

And then just show it, but that wouldn't be particularly good when I want many different alerts across multiple pages...

There must be a better way of doing this?

Thank you :)

Answer

November 8, 2013

KyleMit

You just have you syntaxes mixed up:

<code>document.createElement(tagName)</code>
- is a DOM method that takes a single tag name as a string.
<code>$(html)</code>
- is a jQuery method that will return DOM elements given a complex HTML string.

You typically only use one, and each for its own purpose.

Then, just figure out where you want the new div to go, pick any DOM insertion method*, and then call like this:

$('#selector').after('<div class="alert alert-success">Password Changed</div>');

##Here's a working Demo in fiddle

* DOM Insertion Types:

There are more methods, but these are some popular ones