JavaScriptを使用してデータテーブルのtdタグにdivを動的に追加する方法

Question

div〜tdタグをデータテーブルに追加したいとします。ここに私のHTMLコードです：

table = $("#workLocation-table").DataTable({ 
      data: mainArray, 
      "columnDefs": [ 
       { className: "details-control" , "targets": [0]}, 
       { 
        "order": [[1, 'asc']] 
       }, 
       { 
       "targets": -1, 
       "width": "10%", 
       "data": null, 
       "defaultContent": '<div class="edit-wrapper"><span class="icn"><i class="fa fa-pencil-square-o" aria-hidden="true" id="edit"></i><i class="fa fa-trash-o" aria-hidden="true" id="delete"></i></span></div>' 
      }] 
     }); 

私はdiv要素に「過長」クラスをターゲット2にdiv要素を追加し、提供したいです。

Answer 1

これを試してみてください。これはhtmlコードのどのような

var target = document.getElementById("id_of_the_element_inside_which_you_want_to_insert_div"); 
var d = document.createElement("div"); // Create div dynamically 
d.setAttribute("class","over-length"); // Add "over-length" class to the dynamically created div 
target.appendChild(d); // Now insert div inside target element 

Answer 2

table = $("#workLocation-table").DataTable({ 
     data: mainArray, 
     "columnDefs": [ 
      { className: "details-control" , "targets": [0]}, 
      { 
       "order": [[1, 'asc']] 
      }, 
      { 
       "targets": 2, 
       render : function(data, type, row) { 
        return '<div class="over-length">'+data+'</div>' 
       } 
      }, 
      { 
       "targets": -1, 
       "width": "10%", 
       "data": null, 
       "defaultContent": '<div class="edit-wrapper"><span class="icn"><i class="fa fa-pencil-square-o" aria-hidden="true" id="edit"></i><i class="fa fa-trash-o" aria-hidden="true" id="delete"></i></span></div>' 
     }] 
    });