How to create nested elements with dataviewjs

Developers: Plugin & API
1

I want to have a card grid showing my books. I see there’s dv.el() which is used to create an arbitrary HTML element, but I’m not sure how to use it with nested elements.

Speaking in HTML, I want something like this:

```dataviewjs
const books = dv.pages('"Books"');

for (const book of books) {
    /* in HTML: */
    <div class="card">
        <img src={book.image} class="book-image" /> 
        /* or if possible, something like <div class="book-image">[[book.image]]</div>*/
        <h3>book.title</h3>
    </div>
}
'``
1 Like
2 
const books = dv.pages('"Books"');
books.forEach(el=>{
	let div = dv.el("div",null,{cls:"card"});
	console.log("file::",el.file)
  let eleHtml = `
		<img src="${el.image}" class="book-image" />
		<div class="book-image">
			<a data-href="${el.file.name}" href="${el.file.name}" class="internal-link" target="_blank" rel="noopener">${el.file.name}</a>
		</div>
		<h3>${el.title}</h3>`;
  div.innerHTML = eleHtml;
});