ExpressJS: Inject Include into Jade using Javascript - express

Question

Say I have files such as follows
include/person.jade
.person
.name= name
.desc= desc
Now I want to have a button on my page that, when clicked, injects the previous into the document. I want this because I need to add people to the page. How would I go about doing this?
Should I just use an HTML file in this case?

Answer 1

Jade renders on server side. So you should call method with ajax that will return rendered html. Another option is to do this with JavaScript:
function addPerson(name, desc, parentId){
var container = document.createElement('div');
container.className = 'person';
var nameContainer = document.createElement('div');
nameContainer.className = 'name';
nameContainer.innerHTML = name;
container.appendChild(nameContainer);
var descContainer = document.createElement('div');
descContainer.className = 'desc';
descContainer.innerHTML = desc;
container.appendChild(descContainer);
var parent = document.getElementById(parentId);
parent.appendChild(container);
}
Jade:
#personContainer
input(onclick="addPerson('#{name}', '#{desc}', 'personContainer');", type="button")

Answer 2

So similar to the previous example, I use express to host the Jade HTML for the person input in its own url something like this...
self.app.get('/person/:name/:desc',adddoc.person2);
Of course the person2 implementation is just a render of the Jade.
.person
mixin personField(desc,name,valuefname,valuelname)
Then in my Javascript (using JQuery)
function stump(name, desc){
$.get(
"/person/"+desc+"/"+name,
"{}",
function(data) {
var $parents = $( "#parents" );
$parents.append($(data).filter('.person'));
},
"html"
);
}