javascript - Styling html object with append

Question

Is it possible to style a html object with append ?

<div id="mini-canvas-grid" class="row"></div>

const miniCanvas = document.createElement('canvas')
miniCanvas.setAttribute("id", 'mini-canvas'+ somerandomid);
miniCanvas.setAttribute("width", 400);
miniCanvas.setAttribute("height", 200);
miniCanvas.setAttribute("style", 'border: 2px solid #3F9CE8; margin-bottom:5px');
$('#mini-canvas-grid').append('<div>'+miniCanvas'+<p>Name</p></div>')

I'm getting [object HTMLCanvasElement] Name in the browser

Answer 1

miniCanvas is an element, but you're treating it as a string here:

'<div>'+miniCanvas'+<p>Name</p></div>'

(Not to mention the syntax error, which is either causing errors in your code or you've modified the code in the question.)

One approach would be to create the wrapping div element and append it to that. Something like this:

let div = $('<div/>');
div.append(miniCanvas);
div.append('<p>Name</p>');
$('#mini-canvas-grid').append(div);