select option problem

knvb

Here is my source code:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "RobotoDraft", "Roboto", sans-serif}
.w3-bar-block .w3-bar-item {padding: 16px}
.loginTable
{
    color: #f1f1f1;
}
.loginCaption
{
    text-align:right;
    font-size: 16px;
}
.mySideBar
{
    z-index:3;
    width:320px;
}
.remoteDirUnit
{
    display:none;
    width:fit-content;
    width: -moz-fit-content;
}
.remoteDirListContainer
{
    background: #FFF;
    border-top: solid 1px #BBB;
    border-left: solid 1px #BBB;
    border-bottom: solid 1px #FFF;  
    border-right: solid 1px #FFF;
    overflow: scroll;
    padding-left: 0px;
    margin-left:0px
}
.passiveModeSetting
{
    border:none;
}
.toolbar 
{
    float: left;
}   
</style>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
**<script>
$(document).ready(function() 
                {
                    //var adminPageControl=new AdminPageControl();
                    var directoryAccessTable=document.createElement("table");
                    var th=document.createElement("th");
                    var thead=document.createElement("thead"); 
                    var tbody=document.createElement("tbody");
                    var row=thead.insertRow(thead.rows.length);
        
                    $(th).text("title1");
                    row.appendChild(th);
                    
                    th=document.createElement("th");
                    $(th).text("title2");
                    row.appendChild(th);
                    
                    th=document.createElement("th");
                    $(th).html("title3");
                    
                    row.appendChild(th);
                    directoryAccessTable.setAttribute("width","100%");
                    directoryAccessTable.className="display";
                    directoryAccessTable.appendChild(thead);
                    row=document.createElement("tr")
                    var cell=row.insertCell(row.cells.length);
                    cell.innerHTML="1";
                    var cell=row.insertCell(row.cells.length);
                    cell.innerHTML="2";
                    var cell=row.insertCell(row.cells.length);
                    cell.innerHTML="3";
                    tbody.appendChild(row);
                    directoryAccessTable.appendChild(tbody);
                    
                    
                    var directoryAccessTableX=$(directoryAccessTable).DataTable({
                                                    responsive: true,
                                                    "columnDefs": [
                                                                   {"className": "dt-center", "targets":[2]},
                                                                   {"orderable": false,"targets":[2]}
                                                                    ],
                                                    select: {
                                                                style: 'single'
                                                            },              
                                                    "fixedHeader":true
                                                });
                    document.body.appendChild(directoryAccessTable);
                    
                });
</script>
</head>
<body>

I found that the row select effect does not work.
However, when I move the following:

document.body.appendChild(directoryAccessTable);

before the below:

var directoryAccessTableX=$(directoryAccessTable).DataTable({ .......

The row select effect works.
However, It is not possible in my situation, is there any workaround?

knvb

I mean
1. in my situation, I need to create datatable object before append the table object to document.body.
2.After I execute the above coding, the row does not highlighted when I click on a row.

So, is there any workaround?