I try to append programaticaly a div that contains a checkbox like this :
appendedDiv = $("<div><input type='checkbox'></div>");
$(document.body).append(appendedDiv);
In LinkedIn(only in LinkedIn) the checkbox is not shown within the appended div.
When I check in Devtools , the checkbox exists , but isn't shown.
What can be the reason ?
LinkedIn doesn't allow adding buttons and inputs dynamicaly any way, not only as an inner element.
So this is also not allowed :
appendedDiv = $("<input type='checkbox'>");
(Indead I tested only the jQuery way)
The solution
I improvised a checkbox using a canvas element of a squared shape size 13X13px. I used canvas for drawing the 'X' when the square is 'checked'.
appendedDiv = $("<div><canvas id='myCanvas' width='13'; height='13';></canvas>/div>");
$(document.body).append(appendedDiv);
$("#myCanvas").on("click", function() Toggle() });
function Toggle(){
isChecked = !isChecked; // a global toggling flag
DrawLine(0, 0, 13, 13, isChecked); // The left slash (\) of the X
DrawLine(0, 13, 13, 0, isChecked); // The right slash
}
function DrawLine(startX, startY, endX, endY, status) {
// Get the canvas element and its context
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
if (status)
context.strokeStyle = 'rgb(255, 255, 237)' // black
else
context.strokeStyle = 'rgb(0, 0, 0)'; //white
// Draw the line
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();
}
