Dataviewjs seems to randomly create spans

What I’m trying to do

I’m trying to create a basic table with dataviewjs on which I want to build upon.

Things I have tried

const myTable = dv.el("table");
myTable.setAttribute("id", "myTable");

const headerRow = dv.el("tr");
headerRow.setAttribute("id", "headerRow");

const headerCell = dv.el("th");
headerCell.setAttribute("id", "headerCell");
headerCell.innerHTML = "Hello";


const dataRow = dv.el("tr");
dataRow.setAttribute("id", "dataRow");

const dataCell = dv.el("th");
dataCell.setAttribute("id", "dataCell");
dataCell.innerHTML = "Hello again";


With the above code I keep on getting random `- elements created in the DOM - any ideas as to why this is happening?

When you’re doing the dv.el("table"), you’re actually doing dv.el("table", "") but you’re omitting the text element, but dataviewjs will insert it either way, and that results in your empty span-elements.

So changing the syntax a little, and rearranging stuff to this:

const headerRow = dv.el("tr",
  dv.el("th", "Hello", { attr: { id: "headerCell" } }), 
  { attr: { id: "headerRow" } })

const myTable = dv.el("table", headerRow, { attr: { id: "myTable" } } )

const dataCell = dv.el("td", "Hello again", { attr: { id: "dataCell" } })
dataCell.innerText = "No span" /* Resets the inner text of the table cell */

const dataRow = dv.el("tr", dataCell, { attr: { id: "dataRow" } })


This gets me the HTML output of:

<div class="block-language-dataviewjs node-insert-event">
  <table id="myTable">
    <tr id="headerRow">
      <th id="headerCell">
        <span data-tag-name="p" class="el-p">Hello</span>
    <tr id="dataRow">
      <td id="dataCell">No span</td>

Note how using the dataCell.innerText we remove the span around that table cell also, which the previous alternative of doing the dv.el("th") doesn’t achieve. (So yes, the code is a little redundant, and the “Hello again” gets lost, so it could/should be removed again… :slight_smile: )

Thanks! I’m no programmer so I went a little “creative” and threw this one everywhere :see_no_evil:

something.innerHTML = null;

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.