मैं निम्नलिखित आउटपुट प्राप्त करने की कोशिश कर रहा हूं:

  <ul class="deck">
      <li class="card">
          <i class="fa fa-diamond"></i>
      </li>
      <li class="card">
          <i class="fa fa-paper-plane-o"></i>
      </li>

         ...
   </ul>

लेकिन इसके बजाय, जब मैं अपना कोड चलाता हूं, मुझे मिल रहा है:

  <ul class="deck">

      <li>
          <li class="card">
              <i class="fa fa-diamond"></i>
          </li>
      <li>
          <li class="card">
              <i class="fa fa-paper-plane-o"></i>
          </li>
      </li>
         ...
   </ul>

तो जैसा कि आप देख सकते हैं मुझे एक अतिरिक्त संलग्न <li> टैग मिल रहा है। मैंने कई तरीकों की कोशिश की है, कोई फायदा नहीं हुआ। इस एचटीएमएल को उत्पन्न करने वाला जेएस है:

const gameDeck = document.querySelector(".deck");
const fragment = document.createDocumentFragment();

for (i = 0; i < cardArray.length; i++) {
    const newElement = document.createElement('LI');
    newElement.innerHTML = "<li class=\"card\"><i 
    class="+cardArray[i]+"></i></li>"

    fragment.appendChild(newElement);
}

gameDeck.appendChild(fragment);
0
sjannette 31 मार्च 2018, 03:10

5 जवाब

सबसे बढ़िया उत्तर

मूल रूप से आप एक li को newElement में डाल रहे हैं, जो पहले से ही एक li है। इसके बजाय इसे आजमाएं:

const gameDeck = document.querySelector(".deck");
const fragment = document.createDocumentFragment();

for (i = 0; i < cardArray.length; i++) {
    const newElement = document.createElement('LI');
    newElement.className = 'card';
    newElement.innerHTML = "<i class="+cardArray[i]+"></i>"
    fragment.appendChild(newElement);
}

gameDeck.appendChild(fragment);
0
Nick 31 मार्च 2018, 00:16

आप एक ली बना रहे हैं और फिर "ली" के आंतरिक एचटीएमएल को जोड़ रहे हैं - आंतरिक HTML के अंदर ली को हटाने का प्रयास करें

const gameDeck = document.querySelector(".deck");
const fragment = document.createDocumentFragment();

for (i = 0; i < cardArray.length; i++) {
    const newElement = document.createElement("li");
    newElement.className = "card";
    newElement.innerHTML = "<i class="+cardArray[i]+"></i>"

    fragment.appendChild(newElement);
}

gameDeck.appendChild(fragment);
0
Katherine R 31 मार्च 2018, 00:18

आप एक LI तत्व बना रहे हैं और फिर उसमें एक <li> तत्व डाल रहे हैं। बस यह करें:

const gameDeck = document.querySelector(".deck");
  const fragment = document.createDocumentFragment();

  for (i = 0; i < cardArray.length; i++) {
      const newElement = document.createElement('LI');
      newElement.innerHTML = "<i class="+cardArray[i]+"></i>"

      fragment.appendChild(newElement);
  }

  gameDeck.appendChild(fragment);
0
geoidesic 31 मार्च 2018, 00:18

जब आप LI तत्व बनाते हैं, तो उसमें पहले से ही <li> और </li> टैग होते हैं। उन्हें दोबारा न जोड़ें।

const gameDeck = document.querySelector(".deck");
const fragment = document.createDocumentFragment();

for (i = 0; i < cardArray.length; i++) {
    const newElement = document.createElement('LI');
    newElement.setAttribute('class', 'card');
    newElement.innerHTML = "<i class="+cardArray[i]+"></i>"

    fragment.appendChild(newElement);
}

gameDeck.appendChild(fragment);
0
Javier S 31 मार्च 2018, 00:17
const newElement = document.createElement('LI');

यह एक <li></li> बनाता है।

आंतरिक HTML गुण तत्व के अंदर सामग्री को सेट करता है इसलिए यदि आप <li> अंदर <li> डालते हैं, तो आपके पास <li><li></li></li>

इसके बजाय, पहले से मौजूद <li> को छोड़कर, आंतरिक HTML को उस पर सेट करें जो आप वास्तव में <li> के अंदर होना चाहते हैं। पठनीयता के लिए यहां प्रयुक्त टेम्पलेट स्ट्रिंग।

newElement.innerHTML = `<i class=${cardArray[i]}></i>`

फिर, कक्षा को ली से भी जोड़ दें। ऐसा करने के दो अलग-अलग तरीके। मैं दूसरा पसंद करता हूं, खासकर यदि आप बाद में कक्षाओं का एक समूह जोड़ना चाहते हैं।

newElement.className = 'card'
newElement.classList.add('card')

हालांकि, आप इसके बजाय outerHTML का उपयोग करके उपरोक्त में से सभी को दरकिनार कर सकते हैं, जो मेरे अनुसार आप innerHTML करने की अपेक्षा करते हैं।

const newElement = document.createElement('LI');
newElement.outerHTML = "<li class=\"card\"><i class="+cardArray[i]+"></i></li>"

बाहरी HTML पर अधिक विवरण के लिए MDN पर यह पृष्ठ देखें।

1
kingdaro 31 मार्च 2018, 00:19