文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Javascript的cloneNode()和append()

问使用Javascript的cloneNode()和append()
EN

Stack Overflow用户

提问于 2021-09-26 12:16:01

回答 2查看 55关注 0票数 2

我在使用cloneNode()和append()时遇到了问题。当我执行以下代码时：

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'));
        }
    })
}

  <body onload="loadMagicItems()">
    <li><a></a></li>
    <ul class="magic-list"></ul>
    <div class="magic-area"></div>
  </body>

我有以下HTML结果：

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

我也尝试过这段代码：

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);
        }
    })
}

  <body onload="loadMagicItems()">
    <ul class="magic-list">
      <li><a></a></li>
    </ul>
    <div class="magic-area"></div>
  </body>

但它给了我：

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

我要找的东西应该是这样的：

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

是否可以使用这些方法，或者我是否应该尝试其他方法？我想要这样的原因是因为我正在获取数据，并希望根据项目名称的第一个字母将它们放入其单独的<ul>中。我也为冗长的问题文本道歉，但我想尽可能地给出细节。如果这不是正确的方法，请让我知道，我不会再这样做了，因为我是stackoverflow社区的新手。感谢您的帮助和理解。

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-09-26 13:07:02

您正在将每个项目附加到相同的节点，并编写if case for每个字母是重复的代码。检查下面的代码，我们可以动态地做事情，而不需要对每个字母进行硬编码。

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);
    })
}

<body onload="loadMagicItems()">
    <li><a></a></li>
    <ul class="magic-list"></ul>
    <div class="magic-area"></div>
  </body>

票数 1

Stack Overflow用户

发布于 2021-09-26 12:35:30

您正在克隆每个项目的整个ul (无序列表)，并将它们附加到magic-area。

考虑不使用您创建的<ul>。但是为以A和B开头的每个项目迭代创建一个ul。

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

现在迭代以A开头的所有项。为每个项创建列表项<li>。创建一个锚点a，并将内部HTML设置为项目的名称。将ancher追加到to list item，并将该列表项追加到新创建的列表ulMagicItemsA。

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

最后，将ulMagicItemsA附加到您的magic-area。

下面是它的工作原理：

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);
}

  <body onload="loadMagicItems()">
    <div class="magic-area"></div>
  </body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69334842

复制

相似问题

问使用Javascript的cloneNode()和append()
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript的cloneNode()和append()EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript的cloneNode()和append()
EN