cloneNode() and append() using Javascript

Question

I am having trouble to achieve a desired result using cloneNode() and append(). When I execute the code below:

function loadMagicItems() {
    fetch('https://api.open5e.com/magicitems/?fields=slug,name,desc,type,rarity&limit=1000'
    ).then(function (responses) {
        return responses.json();
    }).then(function (data) {
        displayMagicItems(data.results);
    });
};

function displayMagicItems(items) {
    items.map((item) => {
        const itemName = item.name;
        if (itemName.startsWith("A")) {
            const magicItem = document.querySelector("li").cloneNode(true);
            magicItem.querySelector("a").innerHTML = itemName;
            document.querySelector(".magic-list").append(magicItem);
            document.querySelector('.magic-area').append(document.querySelector('.magic-list'));
        }
        else if (itemName.startsWith("B")) {
            const magicItem = document.querySelector("li").cloneNode(true);
            magicItem.querySelector("a").innerHTML = itemName;
            document.querySelector(".magic-list").append(magicItem);
            document.querySelector('.magic-area').append(document.querySelector('.magic-list'));
        }
    })
}

I have the following HTML result:


  
    Adamantine Armor
    Amulet of Health
    Amulet of Proof against Detection and Location
    Amulet of the Planes
    Animated Shield
    Apparatus of the Crab
    Armor of Invulnerability
    Armor of Resistance
    Armor of Vulnerability
    Arrow-Catching Shield
    Arrow of Slaying
    Bag of Beans
    Bag of Devouring
    Bag of Holding
    Bag of Tricks
    Bead of Force
    Belt of Dwarvenkind
    Belt of Giant Strength
    Berserker Axe
    Boots of Elvenkind
    Boots of Levitation
    Boots of Speed
    Boots of Striding and Springing
    Boots of the Winterlands
    Bowl of Commanding Water Elementals
    Bracers of Archery
    Bracers of Defense
    Brazier of Commanding Fire Elementals
    Brooch of Shielding
    Broom of Flying

Also I have tried this code:

function loadMagicItems() {
    fetch('https://api.open5e.com/magicitems/?fields=slug,name,desc,type,rarity&limit=1000'
    ).then(function (responses) {
        return responses.json();
    }).then(function (data) {
        displayMagicItems(data.results);
    });
};

function displayMagicItems(items) {
    items.map((item) => {
        const itemName = item.name;
        if (itemName.startsWith("A")) {
            const magicItem = document.querySelector(".magic-list").cloneNode(true);
            magicItem.querySelector("a").innerHTML = itemName;
            document.querySelector(".magic-area").append(magicItem);
        }
        else if (itemName.startsWith("B")) {
            const magicItem = document.querySelector(".magic-list").cloneNode(true);
            magicItem.querySelector("a").innerHTML = itemName;
            document.querySelector(".magic-area").append(magicItem);
        }
    })
}

But it gives me:


  Adamantine Armor

  Amulet of Health

  Amulet of Proof against Detection and Location

  Amulet of the Planes

  Animated Shield

  Apparatus of the Crab

  Armor of Invulnerability

  Armor of Resistance

  Armor of Vulnerability

  Arrow-Catching Shield

  Arrow of Slaying

  Bag of Beans

  Bag of Devouring

  Bag of Holding

  Bag of Tricks

  Bead of Force

  Belt of Dwarvenkind

  Belt of Giant Strength

  Berserker Axe

  Boots of Elvenkind

  Boots of Levitation

  Boots of Speed

  Boots of Striding and Springing

  Boots of the Winterlands

  Bowl of Commanding Water Elementals

  Bracers of Archery

  Bracers of Defense

  Brazier of Commanding Fire Elementals

  Brooch of Shielding

  Broom of Flying

What I am looking for would be something like this:


  
    Adamantine Armor
    Amulet of Health
    Amulet of Proof against Detection and Location
    Amulet of the Planes
    Animated Shield
    Apparatus of the Crab
    Armor of Invulnerability
    Armor of Resistance
    Armor of Vulnerability
    Arrow-Catching Shield
    Arrow of Slaying
  
  
    Bag of Beans
    Bag of Devouring
    Bag of Holding
    Bag of Tricks
    Bead of Force
    Belt of Dwarvenkind
    Belt of Giant Strength
    Berserker Axe
    Boots of Elvenkind
    Boots of Levitation
    Boots of Speed
    Boots of Striding and Springing
    Boots of the Winterlands
    Bowl of Commanding Water Elementals
    Bracers of Archery
    Bracers of Defense
    Brazier of Commanding Fire Elementals
    Brooch of Shielding
    Broom of Flying

Is this possible using those methods or should I try something else? The reason I want like this is because I am fetching the data and I want to put them in its individual

user_1536027 · Answer

You are cloning the entire ul (unordered list) for each item and appending them to the magic-area.

Consider not using the

ul

const ulMagicItemsA = document.createElement("ul");

Now iterate all the items starting with A. Create a list item

for each of them. Create an anchor a and set the inner HTML to the name of the item. Append the ancher to to list item and append the list item to the newly create list ulMagicItemsA.

  const li = document.createElement("li");
  const a = document.createElement("a");
  a.innerHTML = item.name;
  li.append(a);
  ulMagicItemsA.append(li);

Finally append ulMagicItemsA to your magic-area.

Here's how that would work:

function loadMagicItems() {
    fetch('https://api.open5e.com/magicitems/?fields=slug,name,desc,type,rarity&limit=1000'
    ).then(function (responses) {
        return responses.json();
    }).then(function (data) {
        displayMagicItems(data.results);
    });
};

function displayMagicItems(items) {
    const magicArea = document.querySelector(".magic-area");
    const magicItemA = items.filter((item) => item.name.startsWith("A"));
    const magicItemB = items.filter((item) => item.name.startsWith("B"));
    
    const ulMagicItemsA = document.createElement("ul");
    ulMagicItemsA.classList.add("magic-list");
    magicItemA.map((item) => {
      const li = document.createElement("li");
      const a = document.createElement("a");
      a.innerHTML = item.name;
      li.append(a);
      ulMagicItemsA.append(li);
    });
    magicArea.append(ulMagicItemsA);
    
    const ulMagicItemsB = document.createElement("ul");
    ulMagicItemsB.classList.add("magic-list");
    magicItemB.map((item) => {
      const li = document.createElement("li");
      const a = document.createElement("a");
      a.innerHTML = item.name;
      li.append(a);
      ulMagicItemsB.append(li);
    });
    magicArea.append(ulMagicItemsB);
}

user_16862883 · Answer

you are appending each item to same node and writing if case for each letter is repeating of code. Check below code where we can do things dynamically without hardcoding for each letter.

function loadMagicItems() {
    fetch('https://api.open5e.com/magicitems/?fields=slug,name,desc,type,rarity&limit=1000'
    ).then(function (responses) {
        return responses.json();
    }).then(function (data) {
        displayMagicItems(data.results);
    });
};

function displayMagicItems(items) {
    items.map((item) => {
        const itemName = item.name;
        //check for ul node with id first letter of list item
        let node = document.getElementById(`magic-ul-${itemName[0]}`)
        if (!node) {
           //if node is node there create new node and append it to main div
           node = document.createElement('ul');
           node.id=`magic-ul-${itemName[0]}`;
           document.querySelector('.magic-area').append(node);
        }
        const magicItem = document.querySelector("li").cloneNode(true);
        magicItem.querySelector("a").innerHTML = itemName;
        node.append(magicItem);
    })
}

cloneNode() and append() using Javascript

2 Answers