Embedding multiple div's in dataview

[ThurMeijer]

I’m trying to create a centralized navigation header.
I’ve embedded the header trough the following query:

dv.executeJs(await dv.io.load("ф System/Queries/embed-HeaderNavigation.md"))

this al works fine. But now I want to style the whole thing.

I’ve got 5 main pages, namely “HOME”, “Page-1”, “Page-2”, “Page-3” and “Page-4”.

I’m trying to embed links to the 5 pages using the following:

dv.el("div",
  dv.el("div", dv.fileLink("HOME"), { cls: "vault-header-item" })+
  dv.el("div", dv.fileLink("Page-1"), { cls: "vault-header-item" })+
  dv.el("div", dv.fileLink("Page-2"), { cls: "vault-header-item" })+
  dv.el("div", dv.fileLink("Page-3"), { cls: "vault-header-item" })+
  dv.el("div", dv.fileLink("Page-4"), { cls: "vault-header-item" }), 
{ cls: "vault-header-block" }
)

I’m using the classes to align the whole thing according to my wishes, but unfortunately I can’t seem to embed the header-items div inside the header-block div. For some reason a separate div is created below the header-item div’s.

The result from the code above is this:
HOME
Page-1
Page-2
Page-3
Page-4
[object HTMLDivElement][object HTMLDivElement][object HTMLDivElement][object HTMLDivElement][object HTMLDivElement]

<div class="vault-header-item"></div>
<div class="vault-header-item"></div>
<div class="vault-header-item"></div>
<div class="vault-header-item"></div>
<div class="vault-header-item"></div>
<div class="vault-header-block"></div>

Instead I’d like to see it as:

<div class="vault-header-block">
  <div class="vault-header-item"></div>
  <div class="vault-header-item"></div>
  <div class="vault-header-item"></div>
  <div class="vault-header-item"></div>
  <div class="vault-header-item"></div>
</div>

Can anyone help me achieve this?

[holroy]

The various dv elements function doesn’t actually return the text used, so nesting them like that isn’t the way to do it, like you’ve discovered already.

I think something like the following would work better for you:

```dataviewjs
dv.container.className += " vault-header-block"

dv.el("div", dv.fileLink("HOME"), { cls: "vault-header-item" })
dv.el("div", dv.fileLink("Page-1"), { cls: "vault-header-item" })
dv.el("div", dv.fileLink("Page-2"), { cls: "vault-header-item" })
dv.el("div", dv.fileLink("Page-3"), { cls: "vault-header-item" })
dv.el("div", dv.fileLink("Page-4"), { cls: "vault-header-item" })
```

Here the dv.container.className should add the vault-header-block to the outer block, and then the various dv.el() should create the separate elements within this container.

At least in my test this created the following DOM elements:

[ThurMeijer]

@holroy

```dataviewjs
dv.container.className += " vault-header-block"

This works perfect! Thanks a lot for your help!