How to add a div dynamically to a td tag of a datatable using JavaScript

Question

I want to add a div to td tag of a datatable. Here is my HTML code:

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>'
            }]
        });

I want to add a div into targets 2 and provide "over-length" class to that div.

What kind of html code is this ?

Anshuman
– Anshuman

2017-10-24 06:13:48 +00:00
Commented Oct 24, 2017 at 6:13 — Anshuman
– Anshuman, Commented Oct 24, 2017 at 6:13

farsana p b · Accepted Answer · 2017-10-24 08:57:03Z

1

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>'
        }]
    });

answered Oct 24, 2017 at 8:57

farsana p b

1652 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Mortensen · Accepted Answer · 2017-10-24 09:27:38Z

1

Try this:

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

edited Oct 24, 2017 at 9:27

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 24, 2017 at 6:22

Anshuman

8231 gold badge9 silver badges24 bronze badges

3 Comments

PhilMaGeo Over a year ago

Why don't you use a render function ?

farsana p b Over a year ago

@PhilMaGeo thank you so much.I solved my issue using render function

PhilMaGeo Over a year ago

:-) I use it every day :-)

Collectives™ on Stack Overflow

How to add a div dynamically to a td tag of a datatable using JavaScript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related