Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question how to append images with src dynamicaaly to the divs

    I have multiple divs and i want to append images dynamically to the respective divs...how can this be achieved using jquery?

    HTML Code:

    Code:
    <div class="page" id="page1">
                    <div class="textImageFullWidth ">
                        <img src="images/img1.png" width="650" height="138">
                    </div>
                    
                    <div class="textImage">
                        <div class="textImage ">
                            <img src="images/img2.png" width="348" height="107">
                            
                        </div>
                        <div class="textImage ">
                            <img src="images/img3.png" width="332" height="103">
                            
                        </div>
                    </div>
                </div>
                
                <div class="page"  id="page2">
                    <div class="textImage">
                        <div class="textImage">
                            <img src="images/img2.png" width="448" height="177">
                            
                        </div>
                        <div class="textImage">
                            <img src="images/img3.png" width="432" height="183">
                            
                        </div>
                    </div>
                    <div class="textImageFullWidth ">
                        <img src="images/img1.png" width="665" height="138">
                    </div>
    </div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,679
    Thanks
    25
    Thanked 655 Times in 654 Posts
    Use the .after of JQ A small example:
    Code:
    <div class="page" id="page1">
    	<div style="border: 1px red solid;" class="textImageFullWidth ">
    		<img src="images/2.png" width="650" height="138">
    	</div>
    
    	<div class="textImage">
    		<div style="border: 1px red solid;"  class="textImage ">
    			<img src="images/2.png" width="348" height="107">
    		</div>
    		<div class="textImage ">
    			<img src="images/6.png" width="332" height="103">
    		</div>
    	</div>
    </div>
    <input type="button" id="add" value="PUSH">
    
    <script type='text/javascript' src='javascript/jquery.js'></script>  <!--CALL YOUR JQ HERE-->
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#add").click(function(){
    		$(".textImageFullWidth").after('<img src="images/img3.png" width="332" height="103">')
    		$(".textImage").after('<img src="images/img3.png" width="332" height="103">')
    	})
    });
    </script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •