How to create nested elements?

[ShahriarKh]

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 to create nested ones.

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>
        dv.el("a", book.file.link) ;
        dv.span(book.file.name);
    </div>
}

I just put some codes that I'm willing to use. It's not the actual code... I mean, it doesn't matter if I should use dv.span(text) or <span>text</span>; I'm looking for the "container" element.

I also posted this in Obsidian forums
https://forum.obsidian.md/t/how-to-create-nested-elements-with-dataviewjs/27788

[blacksmithgu]

The dv.el() API is not as flexible as it should be - I am planning on adding a variant dv.el("div", { settings }, () => ) which allows you to recursively build up elements, but in the meanwhile, you can use the Obsidian API.

let root = await dv.el("div", { cls: "card" });
root.createEl("img", ...);

[ShahriarKh]

Thank you for your answer! Looks like I'm getting close to what I want.
Instead of dv.el("div", ...) - which rendered a bullet list - I used let root = await this.container.createEl('div', {cls: ["card"]});.
Anyways... this is working, but where can I find Obsidian API? I'm not sure how to pass attributes to the elements.

[blacksmithgu]

I don't think it's published somewhere visible yet; all of the API is available via an obsidian node package which you can find on GitHub here: https://github.com/obsidianmd/obsidian-api. Specifically, look for createEl and similar.

Note you can create an element and then use plain old JavaScript DOM maniplation to set fields that you want.

[ShahriarKh]

Thanks

[ShahriarKh]

Any updates on the recursive variant? @blacksmithgu

[BurntNail]

Sorry to post on an old disucussion @blacksmithgu, but this seemed like an appropriate place.
Is there a way to use functions like dv.table and dv.list, but inside a custom div?
like, for example
let div = this.container.createEl("div", "card"); div.dv.table(["element1", "element2"]); //I know that lists don't go to cards, but just as an example

[AB1908]

Did this ever work for you? Curious to hear the results.

[BurntNail]

No I think I just ended up looking at the source and writing custom versions:

https://github.com/BurntNail/6th-Form/tree/main/Scripts

[alancunha26]

I have a good workaround for this issue

if (input && dv) {
  dv.el("div", "", { cls: "dataview alancunha26-root" });
  const container = document.querySelectorAll('.dataview.alancunha26-root')[0];

  container.innerHTML = `
    <div class="card">
      <strong>Alan Cunha</strong> it works!
    </div>
  `;
}

[jessecureton]

Riffing a little bit on @alancunha26's solution, you can actually create nested lists by using only the dv.el() API to pass the proper containers around without CSS and document queries.

if (input && dv) {
  const listRoot = dv.el("ul", "");
  dv.el("li", "Something at the root level", {container: listRoot});

  const nestedListRoot = dv.el("ul", "", {container: listRoot});
  dv.el("li", "A nested item", {container: nestedListRoot});
}

This will create a nested list like this

• Something at the root level
  • A nested item

I've used this to create a file tree viewer for automated maps of content with links to documents using Dataview. That full example is available here: https://gist.github.com/jessecureton/d6f73ab8b03bd76ac92d3fa7a7e334b8

[DZL1943]

no indent