Move existing div into another div with Javascript

Question

After selecting an option from first dropdown list then another dropdown list appear according to selected option. When an option is selected from the second one then the selected one's value is sent to input element that is at the top of the page as hidden. It also calls function "bolumGonder" which submits form that includes input element to same page with GET method. Then according to GET variable retrieve some data from database. PHP

<?php
session_start();
if (isset($_GET['bolumtani']) && !empty($_GET['bolumtani'])) {
    include_once 'alinabilendersler.php';
}   
?>

HTML

<script>    
    function bolumGonder() {
        var seciliBolum = $(".insaat").val();
        if ( seciliBolum.length > 0 ) {
            $("#bolumtani").val(seciliBolum);
            document.bolumtaniform.submit();
        }       
    }
</script>
<form name="bolumtaniform" action="program.php" method="GET">   
    <input name="bolumtani" id="bolumtani" type="text" style="display:none" />
</form>

<div id="orta_div">
    <select class="fakulte_sec" onclick = "bolumAc()">
        <option selected>Fakülte</option>
        <option value="insaat">İnşaat Fakültesi</option>
        <option value="mimarlik">Mimarlık Fakültesi</option>
        <option>Makina Fakültesi</option>
        <option>Uçak ve Uzay Bilimleri Fakültesi</option>
    </select>

    <select class="insaat" style="display:none" onchange="bolumGonder()">
        <option value="" selected>Bölüm</option>
        <option value="ins">İnşaat Mühendisliği %30</option>
        <option value="inse">İnşaat Mühendisliği %100</option>
        <option>Çevre Mühendisliği %30</option>
        <option>Çevre Mühendisliği %100</option>
    </select>

    <select class="mimarlik" style="display:none">
        <option>Mimarlık %30</option>
        <option>İnşaat Mühendisliği %100</option>
        <option>Çevre Mühendisliği %30</option>
        <option>Çevre Mühendisliği %100</option>
    </select>
    <div class="uygun_dersler_ana_div" style="width:100%; color: white; height: 1500px;position: absolute ;overflow: hidden"><?php if (isset($_GET['bolumtani']) && !empty($_GET['bolumtani'])) {$sonuc = bolum($_GET['bolumtani']);} else {}?></div>

</div>

Gettin data from MySQL

<?php
##Database Bağlantısı##
$host = 'host';
$user = 'username';
$pass = 'password';
$db = 'databasename';

$baglan = mysql_connect($host, $user, $pass);
mysql_select_db($db);

mysql_query("SET NAMES 'utf8'  ");
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET COLLATION_CONNECTION = 'utf8_turkish_ci' ");


## Her Ders İçin Ayrı Tablo Oluştur ##            

function bolum($degisken) {
    # Ders Kodlarını Al # # Gets Class Name From Another Website, Asign them into an array ##
    $ch = curl_init("someURL");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $cl = curl_exec($ch);
    $dom = new DOMDocument();
    @$dom->loadHTML($cl);
    $xpath = new DOMXpath($dom);

    $derskodlari = $xpath->query("//option[position() >1]");
    $todbderskodlariarr = array();
    foreach ($derskodlari as $derskodu) {
        $todbderskodlariarr[] = $derskodu;
    }

    $todbderskodu = array();

    foreach ($todbderskodlariarr as $todbderskoduarr) {
        $todbderskodu[] = $todbderskoduarr->nodeValue;
    }

    ## This is just an exception. ##
    $todbderskodu[81] = "MODD";

    for ($a = 0; $a < count($todbderskodu); $a++) {
        @$todbderskodu[$a] = mysql_query("SELECt crnler, derskodu, gun, bina, dersadi FROM $todbderskodu[$a] WHERE dersialabilen LIKE '%" . $bolum . "%'");
    }

    $a = 0;
    while ($a < count($todbderskodu)) {
        while ($row = mysql_fetch_array($todbderskodu[$a], MYSQL_NUM)) {
            $class = substr($row[1], 0, 3);
            echo '<div class="' . $class . '" id="' . $row[0] . '">' . $row[4] . $row[0] . '&nbsp; |' . $row[2] . '</div>';
        }
        echo '<br>';
        $a = $a + 1;
    }
}
?>

Upto now everything works perfect. Script creates divs that have class AKM,ALM,ATA,UCK.. etc. I want to put all divs that have same class into classname_main_div. How can i do that?

Answer 1

use the class of the looped divs and append to the other div like:

$(".looped-divs").appendTo(".container-div");

Hope that helps cheers!

PD: remember to scape the GET variables to avoid SQL injection