Question

As the title vaguely states, I am having issues adding images to a alert message set using a selector and elements? Not too keen on the nomenclature, but here is what i’ve got so far:

function sendalert(alert)
{
    var img;
    img = document.createElement('img');
    img.scr = 'ico/sign_warning.gif';
    img.height = 16;
    img.width = 16;

    $('#alert').text(alert).slideDown('500', function() {
    $(this).delay(5000).slideUp('500')});
}

Basically, I have a div at the top of my page that .slideDown and displays the message input into the function ($alert). However, since I have to have the slide down div in my header, and this function is farther down- I have to use .text to set the divs output.

Plain text output works fine and dandy at the moment (after several hours of trial and error). What I want to do now is add a small error icon in front of the error text.

I’ve had a hard time finding the .whatever elements? But from the list I found only .add and .load stuck out to me- I’ve tried both, but they didn’t work. Below is my attempt with .add (basically used the same concept for .load)

function sendalert(alert)
{
    var img;
    img = document.createElement('img');
    img.scr = 'ico/sign_warning.gif';
    img.height = 16;
    img.width = 16;

    $('#alert').add(img).text(alert).slideDown('500', function() {
    $(this).delay(5000).slideUp('500')});
}

I appreciate any help and hope i’ve provided enough information to convey my issue,

Thanks!

EDIT:
Caught myself in a derp and fixed

img.scr = '<img src="ico/sign_warning.gif" width="16" height="16"/>';

to what it should be

img.scr = 'ico/sign_warning.gif';

Regardless, it did not resolve my issue.

Answer 1

You’ve got a couple problems. First of all, .add() is not the method you’re looking for. You’re probably looking for .append(). Additionally, when you set the .text() of an jQuery object, that will overwrite any other internal markup (including child elements). So even if you switched to .append(), you’d still have issues.

So given all that, how about giving this a try:

$('#alert').text("").append(img).append(text).slideDown('500', function() {
    $(this).delay(5000).slideUp('500');
});

The point is to clear out anything inside the alert element, then append the image, followed by the text of the alert.

What would probably be better (and easier to style) would be to have a fixed icon element and a fixed text area inside the alert element, then set these explicitly. But this should at least get you on the right track.