How to add attributes to elements after dynamically adding them to DOM

171
December 30, 2017, at 6:42 PM

So I'm using fetch to dynamically add elements from local json file to the DOM and then I want to add draggable attributes to it. Here's the code:

function addHeroes() {
  fetch('superheroes.json')
    .then((res) => res.json())
    .then((data) => {
      let output = "";
      data.forEach(function(item) {
        output += `<li>${item.name}</li>`;
      });
      $(".superheroes").append(output);
    })
};
function addDraggables() {
  $(".superheroes li").attr({
    draggable: "true",
    ondragstart: "drag(event)"
  });
};

I cannot add any attribute in those list items in unordered list 'superheroes' after manipulating DOM. However, I can see the list items appear in the inspector.

Answer 1

You have many options to solve your problem

one solution is to use class attribute on the li element and use it to select the elements and then call the method look at the example below or use any selector to select the element except the id selector because it should be unique

function addHeroes() { 
  fetch('superheroes.json') 
    .then((res) => res.json()) 
    .then((data) => { 
      let output = ""; 
      data.forEach(function(item) { 
        output += `<li class='drag-item'>${item.name}</li>`; 
      }); 
      $(".superheroes").append(output); 
      addDraggables(); 
    }) 
}; 
 
function addDraggables() { 
  $(".drag-item").attr({ 
    draggable: "true", 
    ondragstart: "drag(event)" 
  }); 
};
  

another option is to select all elements in superheros list and call the method like the example below

function addHeroes() { 
  fetch('superheroes.json') 
    .then((res) => res.json()) 
    .then((data) => { 
      let output = ""; 
      data.forEach(function(item) { 
        output += `<li class='drag-item'>${item.name}</li>`; 
      }); 
      $(".superheroes").append(output); 
      addDraggables(); 
    }) 
}; 
 
function addDraggables() { 
  // select the last element in the list  
  $(".superheroes li").attr({ 
    draggable: "true", 
    ondragstart: "drag(event)" 
  }); 
};

also another option is to put the attributes directly in the elements like the example below

function addHeroes() { 
  fetch('superheroes.json') 
    .then((res) => res.json()) 
    .then((data) => { 
      let output = ""; 
      data.forEach(function(item) { 
        output += "<li draggable='true' ondragstart ='drag(event)'>${item.name}</li>"; 
      }); 
      $(".superheroes").append(output); 
    }) 
}; 
 
function addDraggables() { 
  $(".superheroes").attr({ 
    draggable: "true", 
    ondragstart: "drag(event)" 
  }); 
};
Copy any one of them and try it in your code

Answer 2

EDIT : the "refresh" didnt work, try this :

function addHeroes() { 
  fetch('superheroes.json') 
    .then((res) => res.json()) 
    .then((data) => { 
      data.forEach(function(item) { 
        let li = $('<li></li>'); 
        li.text(item.name); 
        li.attr({ 
         draggable: "true", 
         ondragstart: "drag(event)" 
        }); 
        $(".superheroes").append(li); 
      }); 
       
    }) 
};

Rent Charter Buses Company
READ ALSO
When using slick slider and have slide with row which have 2 divs it becomes column with 2 divs. Bootstrap 4

When using slick slider and have slide with row which have 2 divs it becomes column with 2 divs. Bootstrap 4

I need to make slider which have slide with row which have 2 divs in itBut when I try to use slick slider this row becomes column

165
Including a javascript file into a nested php file

Including a javascript file into a nested php file

I am working with the following three files:

191
load more data from table using ajax and php

load more data from table using ajax and php

I have 7 data in my database

183