Home/ Questions/Q 382975
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T15:14:16+00:00

In the following example, the alert shows, but the #message is blank . If

  • 0

In the following example, the alert shows, but the #message is blank.

If I comment out the .insertAfter line then the #message is displayed correctly.

Why doesn’t the .insertAfter work in this example?

Firebug just steps right over it.

javascript:

google.load("jquery", "1.3.2");

//run when page is loaded
google.setOnLoadCallback(function() {

    $('.languageChooser select').bind('click', function() {
        var numberOfItems = $('.languageChooser select option:selected').length;
        $('#message').hide().html("You have selected " + numberOfItems + " " + smartPlural('language',numberOfItems) + ".").fadeIn('slow');

        if(numberOfItems == 1) {
            $('#message').insertAfter('<div>Use the CTRL and SHIFT keys to select multiple items.</div>');
            alert('here');
        }
    });

    function smartPlural(itemName, numberOfItems) {
        if(numberOfItems == 1) {
            return itemName;
        } else {
            return itemName + 's';
        }
    }

});

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>Text XHTML Page</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="javascript/main.js"></script>       
    </head>
<body>
    <div class="languageChooser">
        <div class="title">Please choose a language:</div>
        <select size="4" multiple="multiple">
            <option>C#</option>
            <option>Ruby</option>
            <option>PHP</option>
            <option>VB.NET</option>
            <option>JavaScript</option>
            <option>Scala</option>
        </select>
        <div id="message"></div>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    insertAfter works only with elements already existing on the DOM, give a look to the documentation:

    The elements must already be inserted
    into the document (you can’t insert an
    element after another if it’s not in
    the page).

    Are you maybe looking for append or appendTo?

    • 0