www.webdeveloper.com
Results 1 to 8 of 8

Thread: Get Multiple Divs Inner Html

  1. #1
    Join Date
    Sep 2009
    Location
    oxfordshire, england
    Posts
    210

    Get Multiple Divs Inner Html

    Hey guys,

    I have a number of divs with the same id's I wanted to know if it was possible to grab the innerhtml of each one and put them all inside another div. for example the html would look like:

    Code:
    <div id="addons">
    some html
    </div>
    
    <div id="addons">
    some html
    </div>
    
    <div id="addons">
    some html
    </div>
    
    <div id="alladdons">
    the html of all the above
    </div>
    So I need the javascript to grab all the innerhtmls from all the divs with the id of addons and then change the innerhtml of alladdons to have all the html from all those divs.

    I am not the greatest when it comes to javascript and still learning so please be noob friendly with the code

    Thanks guys, any reply is appreciated
    Thanks,
    Simon

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb

    The HTML ids MUST be unique or you might as well not put them in.
    The document.getElementByID() will only get confused.

    You could surround the numerous <div>s with a main <div> and acquire the individual innerHTML information
    using the document.getElementsByTagName() command.
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    
    </head>
    <body>
    <div id="main">
     <div id="addons1">
     some html 1
     </div>
    
     <div id="addons2">
     some html 2
     </div>
    
     <div id="addons3">
     some html 3
     </div>
    </div>
    <div id="contentsOfMain"></div>
    <script type="text/javascript">
    onload = function() {
      var sel = document.getElementById('main').getElementsByTagName('div');
      var str = '';
      for (var i=0; i<sel.length; i++) {
        str += sel[i].innerHTML+'<p>';
      }
      document.getElementById('contentsOfMain').innerHTML = str;
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,684
    or

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div id="addons0">
    some html 0
    </div>
    
    <div id="addons1">
    some html 1
    </div>
    
    <div id="addons2">
    some html 2
    </div>
    
    <div id="alladdons">
    ID names must must unique<br />
    </div>
    
    <input type="button" name="" value="TEST" onmouseup="AddHTML('addons','alladdons');" />
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function AddHTML(addid,toid){
     var nu=0,to=document.getElementById(toid);
     while (document.getElementById(addid+nu)){
      to.innerHTML+=document.getElementById(addid+nu).innerHTML
      nu++;
     }
    }
    /*]]>*/
    </script></body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Sep 2009
    Location
    oxfordshire, england
    Posts
    210
    Thanks for the reply guys, and damn that is not good.

    I will explain my problem and maybe you will understand more.

    The Content Management System I use is annoying, and basicly on each product I am adding options. In the CMS you cant say which options are which so it puts them all togther.

    In the code it has a layout that applys to all components, but I can however assign a generic div using a custom variable.

    If that made any sence, but sadly wrapping all in one div means that the connectors will be mixed in with the addons.
    Thanks,
    Simon

  5. #5
    Join Date
    Sep 2009
    Location
    oxfordshire, england
    Posts
    210
    Actually just played around in the CMS, turns out I can add a custom ID to each but it is not 0, 1 it is 426, 425 and I cant tell which ones. I will try your codes and see how I get on
    Thanks,
    Simon

  6. #6
    Join Date
    Sep 2009
    Location
    oxfordshire, england
    Posts
    210
    Okay that dosnt seem to work but I imagine its where im making the divs, they now look as follows:

    Code:
    <div id="addons426">
    
    </div>
    
    <div id="addons427">
    
    </div>
    
    etc etc
    so can I have it run where it grabs any number after the addons as those numbers will be constantly changing
    Thanks,
    Simon

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Ok, my turn (I know it's cheating to come in this late :P).
    Making sure that all your ids are unique, but formatted as addons#:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Get Multiple Divs Inner Html</title>
    
    		<script type="text/javascript">
    
    			window.onload = function()
    			{
    				var
    					addons = document.getElementsByTagName('div'),
    					html = '',
    					i;
    
    				for (i = 0; i < addons.length; ++i) {
    					if ((/^addons\d/).test(addons[i].id)) {
    						html += addons[i].innerHTML + '<br />';
    					}
    				}
    				document.getElementById('alladdons').innerHTML = html;
    			};
    
    		</script>
    
    	</head>
    	<body>
    
    		<div id="addons426">
    			some html 1
    		</div>
    
    		<div id="addons992">
    			some html 2
    		</div>
    
    		<div id="addons814">
    			some html 3
    		</div>
    
    		<div id="alladdons" style="font-weight: bold;">
    			the html of all the above
    		</div>
    
    	</body>
    </html>
    JavaScript: Learn | Validate | Compact | bionoid

  8. #8
    Join Date
    Sep 2009
    Location
    oxfordshire, england
    Posts
    210
    Quote Originally Posted by bionoid View Post
    Ok, my turn (I know it's cheating to come in this late :P).
    Making sure that all your ids are unique, but formatted as addons#:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Get Multiple Divs Inner Html</title>
    
    		<script type="text/javascript">
    
    			window.onload = function()
    			{
    				var
    					addons = document.getElementsByTagName('div'),
    					html = '',
    					i;
    
    				for (i = 0; i < addons.length; ++i) {
    					if ((/^addons\d/).test(addons[i].id)) {
    						html += addons[i].innerHTML + '<br />';
    					}
    				}
    				document.getElementById('alladdons').innerHTML = html;
    			};
    
    		</script>
    
    	</head>
    	<body>
    
    		<div id="addons426">
    			some html 1
    		</div>
    
    		<div id="addons992">
    			some html 2
    		</div>
    
    		<div id="addons814">
    			some html 3
    		</div>
    
    		<div id="alladdons" style="font-weight: bold;">
    			the html of all the above
    		</div>
    
    	</body>
    </html>
    This seems to have done the job thanks for the help
    Thanks,
    Simon

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles