将div附加到新的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!

Answer 1

Try this code :

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

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

Answer 2

"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.