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
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>
<!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>
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.
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
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>
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
Reply With Quote
Originally Posted by bionoid
Bookmarks