javascript - 将 javascript 写入页面的特定位置

Question

我的任务是使用 JavaScript 完成一个学校元素。我想使用 Materialise 内置插件制作幻灯片。我必须使用 JavaScript 数组来制作列表，但现在内容很难用 html 编写。

我在名为 main.js 的文件中构建了 3 个数组(已正确链接)。

我需要知道如何生成包含正确内容的 LI 元素，我想我必须使用 for 循环。如果我想在单独的页面上显示数组中的元素而不使用任何样式，这会起作用。

如何将它们放入幻灯片中？它应该看起来像 this

主要.js:

<div class="col s12 m12">
      <div class="card grey darken-2">
        <div class="card-content white-text">
          <span class="card-title">Acteurs</span>

            <div class="slider grey darken-2">
                <ul class="slides grey darken-2">
              <!--<li>
                    <h5 class='subtitle'>Dexter Morgan</h5>
                    <div class='slide-img'><img src='img/DexterMorgan.png'></div>
                    <p>Sinds zijn jeugd voelt Dexter een drang om te moorden, die hem wordt ingefluisterd door een innerlijke stem die hij "the Dark Passenger" noemt. Hij houdt zich aan een ethische code die hem werd opgelegd door zijn adoptievader Harry Morgan, die zegt dat hij enkel mensen mag vermoorden die zelf moorden op hun geweten hebben.</p><br />
                    <p>Dexter beschouwt zichzelf als emotioneel afgesloten van de rest van de mensheid. Vaak refereert hij naar een innerlijk gevoel van leegheid en zegt hij dat hij moordt om zich levendig te voelen. Hij zegt dat hij geen gevoelens of geweten heeft, en dat al zijn emotionele reacties een deel zijn van een goed ingestudeerde rol om zijn ware aard te verbergen. Hij heeft geen interesse in romantiek of seks en beschouwt zijn relatie met zijn vriendin (en later vrouw) Rita Bennett als een onderdeel van zijn dekmantel.</p><br />
                    <p>De modus operandi van Dexter zorgt er niet alleen voor dat hij een maximum aan opwinding verkrijgt uit het vermoorden van zijn slachtoffers, maar zorgt er ook voor dat er een minimum aan sporen achterblijft. Dexter kiest zijn slachtoffers uit volgens de door zijn adoptievader opgelegde "code" en onderzoekt eigenhandig of ze moordenaars zijn of niet, waarna hij ze (enkel in de televisieserie) opzoekt om na te gaan of ze opnieuw zullen moorden. Daarna zoekt hij een ruimte die vaak symbolisch in verbinding staat met het slachtoffer, om hem te vermoorden. Hij overdekt alles met plasticfolie, zodat bloedsporen onmogelijk zijn. Meestal hangt hij ook foto's en bewijsstukken op van de misdaden die zijn slachtoffers hebben begaan.</p>
                  </li>
                  <li>
                    <h5 class='subtitle'>Debra Morgan</h5>
                    <div class='slide-img'><img src='img/DebraMorgan.png'></div>
                    <p>Debra werkt aanvankelijk als undercoveragent voor de politie. Ze wordt voorgesteld als de zus van Dexter Morgan, ware het niet dat al in de eerste aflevering blijkt dat Dexter eigenlijk geadopteerd werd door Debra's vader Harry Morgan toen ze nog zeer jong was. Debra en Dexter hebben een extreem nauwe band met elkaar. Het personage heeft er al verschillende relaties opzitten en is in de loop der tijd ontzettend geëvolueerd. In seizoen 1 wordt Debra verliefd op een man die zichzelf Rudy Cooper noemt, maar uiteindelijk blijkt het te gaan om "Ice Truck Killer" Brian Moser, de broer van Dexter. Ze wordt door hem ontvoerd, maar Dexter kan haar redden. In seizoen 2 heeft ze een relatie met FBI-agent Frank Lundy, die later in seizoen 4 voor haar ogen wordt vermoord. Nadat ook haar schoonzus Rita Bennett vermoord werd, helpt Debra haar broer Dexter in de opvoeding van zijn zoontje Harrisson.</p><br />
                    <p>Debra is geboren als dochter van Doris en Harry Morgan en is de pleegzus van Dexter Morgan. Al van jongs af aan is ze stoer en gebruikt ze grove woorden, maar hunkert ze eigenlijk naar aandacht van haar vader. Ze benijdt Dexter voor al de tijd die hij en Harry samen doorbrengen, maar heeft er geen idee van dat Harry hem toen leerde hoe hij ongestraft kon moorden.</p><br />
                    <p>Als ze zestien is, sterft haar moeder aan kanker. Sindsdien is ze vastberaden om net als haar vader rechercheur te worden. Ze begint schieten te leren met het wapen van haar vader. Dexter ontdekt dit en vertelt dit aan Harry, die haar straft. Een razende Debra zegt dan tegen Dexter dat Harry nooit in hun leven toegelaten mocht worden; al gauw trekt ze haar woorden weer in en verontschuldigt ze zich.</p>
                  </li>
                  <li>
                    <h5 class='subtitle'>Angel Batista</h5>
                    <div class='slide-img'><img src='img/AngelBastista.png'></div>
                    <p>Angel is inspecteur bij de sectie Moord van het Miami Metro Police Department. Hij werkt er nauw samen met Dexter Morgan, die hij bewondert omwille van zijn expertise rond seriemoordenaars. Hij beschouwt zichzelf als Dexters' beste vriend, maar kan zich niet echt vinden in zijn fascinatie voor bloed. In de boekenreeks is Batista geen rechercheur, maar een forensisch expert en rechtstreeks collega van Dexter. Batista heeft een vrij droge vorm van humor.</p><br />
                    <p>Angel beloofde zijn vader op diens sterfbed om steeds over alles en iedereen eerlijk te zijn. Dit brengt hem later in problemen, wanneer hij na een avontuurtje met een andere vrouw zijn daden bekent aan zijn vrouw, die meteen een einde maakt aan hun huwelijk. Na maanden van eenzaamheid zoekt Batista heil in de spirituele wereld om van zijn pijn verlost te raken. Batista denkt dat hij de beste vriend van Dexter is, wat Dexter vreemd vindt, want hij heeft hem naar eigen zeggen nooit een reden gegeven om dit te denken.</p>

                  </li>
                  <li>
                    <h5 class='subtitle'>Vince Masuka</h5>
                    <div class='slide-img'><img src='img/VinceMasuka.png'></div>
                    <p>Hij heeft een seksobsessie (hoe kinkier hoe beter) en is er niet verlegen om toenadering te zoeken tot elke vrouw die hij tegenkomt. Toch was hij in staat om "normaal" te doen, bijvoorbeeld toen Angel Batista in het ziekenhuis lag of wanneer Debra helemaal over haar toeren was door de terugkeer van Lundy. Op een bepaald moment confronteert Joey Quinn Vince met het feit dat omwille van zijn gedrag eigenlijk niemand hem kan uitstaan, wat voor hem een behoorlijke schok is. Later blijkt echter dat Quinn overdreef, en dat zijn collega's het gedrag van Vince best amusant vinden, zolang hij niet overdrijft.</p>
                  </li>
                  <li>
                    <h5 class='subtitle'>Joey Quinn</h5>
                    <div class='slide-img'><img src='img/JoeyQuinn.png'></div>
                    <p>Quinn lijkt een boontje te hebben voor zijn nieuwe partner, Debra Morgan, en gaat zelfs zo ver in zijn charme-offensief dat hij een informant inschakelt om haar te helpen in de zaak rond Oscar Prado. Over Quinns verleden is maar weinig bekend, wat bij Debra vragen oproept, zeker wanneer ze door de dienst Interne Zaken wordt gevraagd om hem discreet in het oog te houden. Quinn komt hier al snel achter en geeft uiteindelijk toe dat hij in het verleden de schuld kreeg voor de dood van een collega. Debra vertrouwt hem niet langer en raadt Dexter af of Quinn uit te nodigen op zijn huwelijk. Quinn maakt uiteindelijk toch zijn opwachting.</p>
                  </li>
                  <li>
                    <h5 class='subtitle'>Rita Bennett</h5>
                    <div class='slide-img'><img src='img/RitaBennett.png'></div>
                    <p>Rita Benett verschijnt in de eerste aflevering als Dexter Morgans' vriendin. Ze blijkt mishandeld en seksueel misbruikt te zijn door haar ex-man, Paul Bennett. Dexters' zus Debra Morgan ontving indertijd een oproep over huishoudelijk geweld en redde haar leven. Rita heeft ook twee kinderen, Astor en Cody Bennett. Onwetend over Dexters' leven als seriemoordenaar, fungeert ze doorheen het eerste seizoen vaak als zijn grootste steun. Ze speelt een grote rol in de aflevering "Return to Sender", waarin Paul Bennett wordt vrijgelaten uit de gevangenis en naar het verjaardagsfeest van zijn dochter wil komen. In "Circle of Friends" maakt Rita hem duidelijk dat hij zijn kinderen voorlopig enkel onder toezicht te zien krijgt, voordat ze toestemming geeft voor vrije momenten. Paul gaat aanvankelijk akkoord, maar in de aflevering "Father Knows Best" hervalt Paul in zijn oude gewoonten en gebruikt hij geweld om zijn kinderen te zien. Hij dringt haar huis binnen en Rita verdedigt zich door hem neer te slaan met een honkbalknuppel. Paul dient een klacht in tegen Rita en bedreigt ook Dexter. Dexter slaagt hem KO en voert hem terug naar zijn hotel, waar hij doet uitschijnen dat Paul drugs gebruikt heeft. Dexter waarschuwt de politie en de onder voorwaarden vrijgelaten Paul belandt terug in de gevangenis.</p>
                  </li>
                  <li>
                    <h5 class='subtitle'>James Doakes</h5>
                    <div class='slide-img'><img src='img/JamesDoakes.png'></div>
                    <p>Doakes haat Dexter; hij is de enige persoon die merkt dat Dexter zich anders voordoet dan hij werkelijk is. Doakes verdenkt Dexter er openlijk van iets te verbergen, en dit vermoeden gaat er alleen nog maar op vooruit wanneer hij ontdekt dat Dexter informatie over de Ice Truck Killer-zaak achterhoudt.</p>
                  </li>-->

                </ul>
              </div>

        </div>
      </div>
    </div>

---

/*
*   Simulatie database in JS
*   Gebruik gemaakt van: Arrays en For loop
*/
var actors = ["Dexter Morgan","Debra Morgan", "Angel Batista", "Vince Masuka", "Joey Quinn", "Rita Bennett", "James Doakes"];
var images = ["DexterMorgan.png", "DebraMorgan.png", "AngelBatista.png", "VinceMasuka.png", "JoeyQuinn.png", "RitaBennett.png", "JamesDoakes.png"];
var bio = [
    "<p>Sinds zijn jeugd voelt Dexter een drang om te moorden, die hem wordt ingefluisterd door een innerlijke stem die hij &#34;the Dark Passenger&#34; noemt. Hij houdt zich aan een ethische code die hem werd opgelegd door zijn adoptievader Harry Morgan, die zegt dat hij enkel mensen mag vermoorden die zelf moorden op hun geweten hebben.</p><br />
    <p>Dexter beschouwt zichzelf als emotioneel afgesloten van de rest van de mensheid. Vaak refereert hij naar een innerlijk gevoel van leegheid en zegt hij dat hij moordt om zich levendig te voelen. Hij zegt dat hij geen gevoelens of geweten heeft, en dat al zijn emotionele reacties een deel zijn van een goed ingestudeerde rol om zijn ware aard te verbergen. Hij heeft geen interesse in romantiek of seks en beschouwt zijn relatie met zijn vriendin (en later vrouw) Rita Bennett als een onderdeel van zijn dekmantel.</p><br />
    <p>De modus operandi van Dexter zorgt er niet alleen voor dat hij een maximum aan opwinding verkrijgt uit het vermoorden van zijn slachtoffers, maar zorgt er ook voor dat er een minimum aan sporen achterblijft. Dexter kiest zijn slachtoffers uit volgens de door zijn adoptievader opgelegde &#34;code&#34; en onderzoekt eigenhandig of ze moordenaars zijn of niet, waarna hij ze (enkel in de televisieserie) opzoekt om na te gaan of ze opnieuw zullen moorden. Daarna zoekt hij een ruimte die vaak symbolisch in verbinding staat met het slachtoffer, om hem te vermoorden. Hij overdekt alles met plasticfolie, zodat bloedsporen onmogelijk zijn. Meestal hangt hij ook foto's en bewijsstukken op van de misdaden die zijn slachtoffers hebben begaan.</p>",
    "<p>Debra werkt aanvankelijk als undercoveragent voor de politie. Ze wordt voorgesteld als de zus van Dexter Morgan, ware het niet dat al in de eerste aflevering blijkt dat Dexter eigenlijk geadopteerd werd door Debra's vader Harry Morgan toen ze nog zeer jong was. Debra en Dexter hebben een extreem nauwe band met elkaar. Het personage heeft er al verschillende relaties opzitten en is in de loop der tijd ontzettend geëvolueerd. In seizoen 1 wordt Debra verliefd op een man die zichzelf Rudy Cooper noemt, maar uiteindelijk blijkt het te gaan om &#34;Ice Truck Killer&#34; Brian Moser, de broer van Dexter. Ze wordt door hem ontvoerd, maar Dexter kan haar redden. In seizoen 2 heeft ze een relatie met FBI-agent Frank Lundy, die later in seizoen 4 voor haar ogen wordt vermoord. Nadat ook haar schoonzus Rita Bennett vermoord werd, helpt Debra haar broer Dexter in de opvoeding van zijn zoontje Harrisson.</p><br />
    <p>Debra is geboren als dochter van Doris en Harry Morgan en is de pleegzus van Dexter Morgan. Al van jongs af aan is ze stoer en gebruikt ze grove woorden, maar hunkert ze eigenlijk naar aandacht van haar vader. Ze benijdt Dexter voor al de tijd die hij en Harry samen doorbrengen, maar heeft er geen idee van dat Harry hem toen leerde hoe hij ongestraft kon moorden.</p><br />
    <p>Als ze zestien is, sterft haar moeder aan kanker. Sindsdien is ze vastberaden om net als haar vader rechercheur te worden. Ze begint schieten te leren met het wapen van haar vader. Dexter ontdekt dit en vertelt dit aan Harry, die haar straft. Een razende Debra zegt dan tegen Dexter dat Harry nooit in hun leven toegelaten mocht worden; al gauw trekt ze haar woorden weer in en verontschuldigt ze zich.</p>",
    "<p>Angel is inspecteur bij de sectie Moord van het Miami Metro Police Department. Hij werkt er nauw samen met Dexter Morgan, die hij bewondert omwille van zijn expertise rond seriemoordenaars. Hij beschouwt zichzelf als Dexters' beste vriend, maar kan zich niet echt vinden in zijn fascinatie voor bloed. In de boekenreeks is Batista geen rechercheur, maar een forensisch expert en rechtstreeks collega van Dexter. Batista heeft een vrij droge vorm van humor.</p><br />
    <p>Angel beloofde zijn vader op diens sterfbed om steeds over alles en iedereen eerlijk te zijn. Dit brengt hem later in problemen, wanneer hij na een avontuurtje met een andere vrouw zijn daden bekent aan zijn vrouw, die meteen een einde maakt aan hun huwelijk. Na maanden van eenzaamheid zoekt Batista heil in de spirituele wereld om van zijn pijn verlost te raken. Batista denkt dat hij de beste vriend van Dexter is, wat Dexter vreemd vindt, want hij heeft hem naar eigen zeggen nooit een reden gegeven om dit te denken.</p>",
    "<p>Hij heeft een seksobsessie (hoe kinkier hoe beter) en is er niet verlegen om toenadering te zoeken tot elke vrouw die hij tegenkomt. Toch was hij in staat om &#34;normaal&#34; te doen, bijvoorbeeld toen Angel Batista in het ziekenhuis lag of wanneer Debra helemaal over haar toeren was door de terugkeer van Lundy. Op een bepaald moment confronteert Joey Quinn Vince met het feit dat omwille van zijn gedrag eigenlijk niemand hem kan uitstaan, wat voor hem een behoorlijke schok is. Later blijkt echter dat Quinn overdreef, en dat zijn collega's het gedrag van Vince best amusant vinden, zolang hij niet overdrijft.</p>",
    "<p>Quinn lijkt een boontje te hebben voor zijn nieuwe partner, Debra Morgan, en gaat zelfs zo ver in zijn charme-offensief dat hij een informant inschakelt om haar te helpen in de zaak rond Oscar Prado. Over Quinns verleden is maar weinig bekend, wat bij Debra vragen oproept, zeker wanneer ze door de dienst Interne Zaken wordt gevraagd om hem discreet in het oog te houden. Quinn komt hier al snel achter en geeft uiteindelijk toe dat hij in het verleden de schuld kreeg voor de dood van een collega. Debra vertrouwt hem niet langer en raadt Dexter af of Quinn uit te nodigen op zijn huwelijk. Quinn maakt uiteindelijk toch zijn opwachting.</p>",
    "<p>Rita Benett verschijnt in de eerste aflevering als Dexter Morgans' vriendin. Ze blijkt mishandeld en seksueel misbruikt te zijn door haar ex-man, Paul Bennett. Dexters' zus Debra Morgan ontving indertijd een oproep over huishoudelijk geweld en redde haar leven. Rita heeft ook twee kinderen, Astor en Cody Bennett. Onwetend over Dexters' leven als seriemoordenaar, fungeert ze doorheen het eerste seizoen vaak als zijn grootste steun. Ze speelt een grote rol in de aflevering "Return to Sender", waarin Paul Bennett wordt vrijgelaten uit de gevangenis en naar het verjaardagsfeest van zijn dochter wil komen. In "Circle of Friends" maakt Rita hem duidelijk dat hij zijn kinderen voorlopig enkel onder toezicht te zien krijgt, voordat ze toestemming geeft voor vrije momenten. Paul gaat aanvankelijk akkoord, maar in de aflevering "Father Knows Best" hervalt Paul in zijn oude gewoonten en gebruikt hij geweld om zijn kinderen te zien. Hij dringt haar huis binnen en Rita verdedigt zich door hem neer te slaan met een honkbalknuppel. Paul dient een klacht in tegen Rita en bedreigt ook Dexter. Dexter slaagt hem KO en voert hem terug naar zijn hotel, waar hij doet uitschijnen dat Paul drugs gebruikt heeft. Dexter waarschuwt de politie en de onder voorwaarden vrijgelaten Paul belandt terug in de gevangenis.</p>",
    "<p>Doakes haat Dexter; hij is de enige persoon die merkt dat Dexter zich anders voordoet dan hij werkelijk is. Doakes verdenkt Dexter er openlijk van iets te verbergen, en dit vermoeden gaat er alleen nog maar op vooruit wanneer hij ontdekt dat Dexter informatie over de Ice Truck Killer-zaak achterhoudt.</p>"
];

    for(var i=0; i<actors.length; i++) {
        document.write(actors[i]);
    }

Answer 1

如果我正确理解你想要什么，你可以使用 document.createElement 在 for 循环中创建一个 li 并将当前循环数组项的文本附加到其中，然后我们使用 appendChild 将新创建的元素添加到我们的案例中的占位符。

代码:

var actors = ["Dexter Morgan","Debra Morgan", "Angel Batista", "Vince Masuka", "Joey Quinn", "Rita Bennett", "James Doakes"];


var placeholder = document.querySelector('.placeholder');

for(var i = 0;i < actors.length;i++) {
  var li = document.createElement('li');
  li.innerHTML = actors[i];
  console.log(li);
  placeholder.appendChild(li);
}

我在这里使用占位符来插入元素；

Example