how to append div using jquery

Question

0.00/5 (No votes)

See more:

I am using this code to append div when i click or submit the button

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        var divProcessing = '<div><img src="/Images/processing.gif" alt="Processing.."/></div>';
        $(".btnProcessing").click(function() {
            $(this).hide().after().parent().append(divProcessing);
        });

    });
        
</script>

But some times when i click the submit button multiple divs(it displays multiple images) are added...

Pls tell why its append multiple divs..

any one say how to solve this problem............

And then i remove the div tag

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        var divProcessing = '<img src="/Images/processing.gif" alt="Processing.."/>';
        $(".btnProcessing").click(function() {
        $(this).hide().after().parent().append(divProcessing);
        });

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function() {
            $('.btnProcessing').click(function() {
            $(this).hide().after().parent().append(divProcessing);
            });
        });
    });
        
</script>

But now i have same issue but the image is added multiple times but horizontally..

If i am using div the image is added multiple time vertically..

why its occur...

Posted 26-Sep-12 20:16pm

saravana__

Updated 28-Sep-12 1:56am

v5

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Unareshraju · Answer 1 · 2012-09-26T20:56:00

Solution 2

XML

<script type="text/javascript">
    $(document).ready(function() {
        var divProcessing = '<div><img src="/Images/processing.gif" alt="Processing.."/></div>';
        $(".btnProcessing").click(function() {
                document.getElementById("div").appendChild(divProcessing);
        });
     });

</script>

Posted 26-Sep-12 20:56pm

Unareshraju

Comments

saravana__ 27-Sep-12 5:01am

I think append() and appendChild() both are same difference is in java script we use appenChild() and jquery we use append()......

Tell me there is any difference between these two things..

venkat pavan · Answer 2 · 2012-09-26T21:03:00

Solution 3

Try this..

XML

<script type="text/javascript">
    $(document).ready(function() {
        var divProcessing = '<div><img src="/Images/processing.gif" alt="Processing.."/></div>';
        $(".btnProcessing").click(function() {
            $(this).hide().after().parent().html(divProcessing);
        });

    });

</script>

Posted 26-Sep-12 21:03pm

venkat pavan

Comments

saravana__ 27-Sep-12 4:43am

Tell me why that issue occurs

saravana__ 27-Sep-12 4:45am

Its not working for me now also the above code add multiple divs

nrgjack · Answer 3 · 2012-09-26T22:31:00

Solution 4

working example:

http://jsfiddle.net/PSHWZ/12/[^]

bye

Posted 26-Sep-12 22:31pm

nrgjack

Unareshraju · Answer 4 · 2012-09-26T20:35:00

Solution 1

hi ,
see here : http://www.ezineasp.net/post/Javascript-Append-Div-Contents.aspx[^]

Posted 26-Sep-12 20:35pm

Unareshraju

Comments

saravana__ 27-Sep-12 5:08am

The above code is not working for me..
Why the processing image is displayed multiple times...