get attributes from document fragment?

Question

I want to access the data-index attribute in javascript but when I type taskElement.dataset.index I am getting an error

How can I access the attributes that in the template element?

const tasksContainer = document.querySelector('[data-tasks]')
const taskTemplate = document.getElementById('task-template')
const taskElement = document.importNode(taskTemplate.content, true)
tasksContainer.appendChild(taskElement)

<div class="tasks draggables-container" data-tasks>Tasks:</div>

<template id="task-template">
  <div class="task draggable" draggable="true" data-index>
    <input type="checkbox" />
    <label>
      <span class="custom-checkbox">Text</span>
    </label>
  </div>
</template>

I made you a snippet to have a [mcve] – mplungjan Mar 29 '20 at 21:28 — mplungjan, Mar 29 '20 at 21:28

score 1 · Answer 1 · answered Nov 10 '22 at 01:52

1

You can access the attributes of elements in a DocumentFragment by querySelecting for them and then accessing them the normal way you would.

taskElement.querySelector("div[data-index]").dataset.index

answered Nov 10 '22 at 01:52

Noah Camara

21
4

score 0 · Answer 2 · answered Mar 29 '20 at 21:28

You mean this?

const tasksContainer = document.querySelector('[data-tasks]')
const taskTemplate = document.getElementById('task-template')
const taskElement = document.importNode(taskTemplate.content, true)
console.log(taskElement.querySelector("div[data-index]").dataset.index)
tasksContainer.appendChild(taskElement)

<div class="tasks draggables-container" data-tasks>Tasks:</div>

<template id="task-template">
  <div class="task draggable" draggable="true" data-index="idx">
    <input type="checkbox" />
    <label>
      <span class="custom-checkbox">Text</span>
    </label>
  </div>
</template>

score 0 · Answer 3 · answered Mar 29 '20 at 22:19

0

You need to assign value to dataset tags to access it.

like this:

<div class="task draggable" draggable="true" data-index="1">

answered Mar 29 '20 at 22:19

Aitor Solana

21
4

get attributes from document fragment?

3 Answers3