I'm in doubt with my HTML design. I have a <div> ... </div> section at a fixed position. I wish to reuse that <div></div> anywhere inside of the body tag.
I tried it using jQuery and JavaScript with the method of innerhtml('...'), after('...'), append('...'). It works, but I don't want to explain the 100 of lines with quotes, and one more thing. I wish to include that <div></div> more than one time.
Sample code format.
<html>
<head>
....
</head>
<body>
...
<div id='includes_div'> <!-- It hides on form load -->
...
... <!-- having 100 of lines -->
</div>
<div id='div1'>
<!-- want to include here -->
...
</div>
<div id='div2'>
<!-- want to include here -->
...
</div>
</body>
</html>
Is it possible with jQuery or JavaScript?
I'm in doubt with my HTML design. I have a <div> ... </div> section at a fixed position. I wish to reuse that <div></div> anywhere inside of the body tag.
I tried it using jQuery and JavaScript with the method of innerhtml('...'), after('...'), append('...'). It works, but I don't want to explain the 100 of lines with quotes, and one more thing. I wish to include that <div></div> more than one time.
Sample code format.
<html>
<head>
....
</head>
<body>
...
<div id='includes_div'> <!-- It hides on form load -->
...
... <!-- having 100 of lines -->
</div>
<div id='div1'>
<!-- want to include here -->
...
</div>
<div id='div2'>
<!-- want to include here -->
...
</div>
</body>
</html>
Is it possible with jQuery or JavaScript?
Share Improve this question edited Mar 30, 2013 at 13:34 Trinimon 14k9 gold badges46 silver badges61 bronze badges asked Mar 30, 2013 at 13:20 RanjithRanjith 2,8193 gold badges24 silver badges42 bronze badges 4-
3
I don't understand what you mean by "I wish to call that
<div></div>" and "I don't want to explain the 100 of lines with quotes". One cannot "call" a DOM element. You also wrote "It works"... what exactly does work and what are still having problems with? – Felix Kling Commented Mar 30, 2013 at 13:24 - Perhaps you are looking for templating – mplungjan Commented Mar 30, 2013 at 13:25
-
I hope my
sample codeexplain it clearly. – Ranjith Commented Mar 30, 2013 at 13:26 -
Do you want to put each line from
#includes_divto separate div? – Mikhail Chernykh Commented Mar 30, 2013 at 13:44
2 Answers
Reset to default 5this should work:
var cont = $('#includes_div').html();
$('#div1').append(cont);
$('#div2').append(cont);
There are a quite a few ways to do this, below are just two that I see monly employed.
The first is using the jQuery 'clone()' method:
var toClone = $('#includes_div');
var cloneContainers = $('#div1, #div2');
cloneContainers.each(function() {
var clonedDiv = toClone.clone();
clonedDiv.attr('id', '');
this.append(clonedDiv);
});
This will give you an exact clone of the original div and put it in each container. As it is an exact clone you need to prevent id conflicts.
Another way is to just use the content of the first div, rather than the whole of it.
var content = $('#includes_div').html();
var containers = $('#div1, #div2');
containers.each(function() {
this.append(content);
});
Obviously the code above is written to help break down the process, it's possible to write them both in a more pact form.