将数组中的一项附加到一个 div

Question

I have a bunch of content on a page, including some sections like below, but interspersed with other content sections.

<main>
  <section class="module content content-fact">
    <div class="container" id="0"></div>
  </section>

  <section class="module content content-fact">
    <div class="container" id="1"></div>
  </section>

  <section class="module content content-fact">
    <div class="container"></div>
  </section>
</main>

I have an array of random facts that I have randomized using Underscore.js --> _.shuffle() function.

const spiderFacts = [
    "Spiders are not insects. They are arachnids. Both arachnids and insects are arthropods.",
    "Spiders eat about 200 kilograms of insects per hectare per year.",
    "Spiders inhabit just about every corner of the globe.",
    "Charlotte in E.B. White’s Charlotte’s Web was a barn orbweaver spider, <em>Araneus cavaticus<em>."
]

const randomSpiderFacts = _.shuffle(spiderFacts);

I want to append a p element containing one random fact to each section.content-fact > div.container on the page, but I'm stuck on how to do that.

So far I have...

for (var fact in randomSpiderFacts) {
  var newElement = document.createElement('p');
  newElement.className = "fact";
  newElement.innerHTML = randomSpiderFacts[fact];
  $('.content-fact > .container').appendChild(newElement);
}

I feel like I'm going about this the wrong way but am not sure how to get back on the right track. Can anyone help ?

I'm stuck trying to figure out how to do this and hope I explained what I'm trying to do clearly.

Answer 1

Your code is clean expet the appendChild() function , this is not a part of jquery

Also each fact will be append to each .fact div , so reverse the function by looping the div's and append to each div a fact content using appendTo()

See below snippet :

 const spiderFacts = [ "Spiders are not insects. They are arachnids. Both arachnids and insects are arthropods.", "Spiders eat about 200 kilograms of insects per hectare per year.", "Spiders inhabit just about every corner of the globe.", "Charlotte in EB White's Charlotte's Web was a barn orbweaver spider, <em>Araneus cavaticus<em>." ] const randomSpiderFacts = _.shuffle(spiderFacts); $('.content-fact > .container').each(function(i,el){ // check if not exceeding the array so return empty string var factContent = randomSpiderFacts[i] ? randomSpiderFacts[i] : ""; $("<p>").addClass("fact").html(factContent).appendTo(el); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script> <section class="module content content-fact"> <div class="container" id="0"></div> </section> <section class="module content content-fact"> <div class="container" id="1"></div> </section> <section class="module content content-fact"> <div class="container"></div> </section>