Append a div to a new div

Question

i am using IPB and i am going to put each category into a new tab the category div is something like this:

<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>

and my tabs content is like this:

<div class="content">
                    <div id="content-1" class="content-1">

                    </div>
</div>

and the categories divs is already showing but i want it to be moved to the content-1 div without duplicate so i want it to move from its div to this div with jjava script how?

<script>
  document.getElementById('content-1').appendChild(
    document.getElementById('category_100')
  );
</script>

this worked for me but how can i add more than id to category_100

i want it to be like this in one script code so i would not repeart the scrip code four times:

<div class="content">
                    <div id="content-1" class="content-1">
                        <div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'> 
                    </div>
</div>

using my two lines the suggested things here is not working!

When you appending element that already exist in your document, the element is not copied, it just moving (replacing) them... — Givi, Jul 21 '13 at 16:34
[Fiddle](http://jsfiddle.net/GKDev/YeU7r/) If i understand you correctly this is what you need... — Givi, Jul 21 '13 at 16:46
this worked but how can i add more that one id to category 100 — Abdallah Abdalaziz, Jul 21 '13 at 16:50
Can you provide all of your markup that you have and what kind of results you expect to get... — Givi, Jul 21 '13 at 16:58

Lucas Willems · Answer 1 · 2013-07-21T16:59:53.033

0

Try this code :

$('div[id^="category_"]').appendTo('#content-1')

Have a look to this fiddle : http://jsfiddle.net/lulu3030/sjEPx/2/

edited Jul 21 '13 at 16:59

answered Jul 21 '13 at 16:25

Lucas Willems

6,673
4
28
45

i will just paste it like this what should i add? for example script or what? – Abdallah Abdalaziz Jul 21 '13 at 16:28
hey i mean how to add this code where and inside which tag and what if my category id is 12, 56, 20 and like this? – Abdallah Abdalaziz Jul 21 '13 at 16:37
I edited my answer. What means "where and inside which tag" ? Do you know how to insert Javascript ? – Lucas Willems Jul 21 '13 at 17:00

score 0 · Answer 2 · answered Jul 21 '13 at 18:04

"using my two lines the suggested things here is not working!"

You just get a single element with an ID and trying to append it...

Live Demo

If you want to append multiple elements, there are many ways...

Wrap those elements and then append...

<div id="categories">
    <div id='category_100'></div>
    <div id='category_104'></div>
    <!-- etc. -->
</div>

document.getElementById('content-1').appendChild(document.getElementById('categories'));

or add same class to all elements that you want to append...

<div id='category_100' class="myClass"></div>
<div id='category_104' class="myClass"></div>

[].forEach.call(document.getElementsByClassName("myClass"), function (value, index, array) {
    document.getElementById("content-1").appendChild(value);
});

or get elements with query selector that match some pattern...

[].forEach.call(document.querySelectorAll("div[id^='category_']"), function (value, index, array) {
    document.getElementById("content-1").appendChild(value);
});

and etc.

Append a div to a new div

2 Answers2