Dataviewjs seems to randomly create spans

[PracticalPanda]

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";


headerRow.appendChild(headerCell);
myTable.appendChild(headerRow);


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

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

dataRow.appendChild(dataCell);
myTable.appendChild(dataRow);

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

[holroy]

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:

```dataviewjs
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" } })

myTable.appendChild(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>
      </th>
    </tr>
    <tr id="dataRow">
      <td id="dataCell">No span</td>
    </tr>
  </table>
</div>

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… )

[PracticalPanda]

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

something.innerHTML = null;