Create a div/href/img nest block in JQuery or JavaScript

Question

I am using a button and when you click it, it creates a panel which contains 4 divs, multiple links < href >, and multiple < img >s. I am new at web programming but from my understanding this has to be in the Javascript section especially since this is a using jsPlumb and all jsPlumb elements have to be within the jsPlumb ready function. The panel created will become a node that can be dragged and connected to other nodes, which I have working. I am also using Jinja and am passing values from a sqlite database to the panel which works as well. I can pass the variables to it but I am not sure how to create the < img > and < href> tags. I have made it in html but I don't know how to do it in JavaScript.

I am using jQuery and I have found several ways to make divs and create the panel with multiple divs but not a way to < img > and < href > tags in the divs. Here is the two ways of making divs I have done:

var connect = $('<div>').addClass('connect');
var newAgent = $('<div class="panel"></div>');
newAgent.append(connect);

and

var addClassContent = $('<div>', {
    "class": "panel_class_content",
     text: classThumbnail + classDescription ,
});
newAgent.append(addClassContent);

Overall I am creating a panel and within the panels there are several divs and within some divs there are < a href >< img >< /img >< /a > and < img >< /img >. How should I go about nesting these?

Thank you!

Answer 1

First off, put an id on your div like such (just so you don't mess with other divs):

<div id="div" ></div> 

Then using jQuery:

$('#div').append('< a href="" >< img src="" >< /a >' + '< img src="" >'

This should be all you need