Javascript 使用Java脚本在div中创建新的span标记

const wordsContainer = document.querySelector("#wordsContainer");
const newArray = ["hello", "world", "lorem", "ipsum"];
const wordsCount = newArray.length;

function spanifyWords(word, parent){
  for (let i=0 ; i < word.length; i++){
    const newSpan = document.createElement("span");
    parent.append(newSpan);
    newSpan.textContent = word[i];
  }
}

function renderDivs(n){
  for (let i=0; i<n; i++){
    const randomIndex = Math.floor(Math.random() * wordsCount);
    const randomWord = newArray[randomIndex];
    const newDiv = document.createElement("div"); 
    wordsContainer.append(newDiv);
    spanifyWords(randomWord, newDiv);
  }
}

renderDivs(6);

#wordsContainer * {
  outline: 1px solid #000;
  padding: 1rem;
  font: 1rem/1 sans-serif;
}

  <div id="wordsContainer"></div>

// Utility functions
const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
const repeat = (n, cb) => [...Array(n)].forEach((_, i) => cb(i));

// Wordify
const elWords = el("#wordsContainer");
const words = ["hello", "world", "lorem", "ipsum"];

const spanify = (word) => [...word].reduce((a, x) => a + `<span>${x}</span>`, "");

function renderDivs(n){
  repeat(n, () => {
    const randomIndex = Math.floor(Math.random() * words.length);
    const randomWord = words[randomIndex];
    const elDiv = elNew("div", { innerHTML: spanify(randomWord) });
    elWords.append(elDiv);
  });
}

renderDivs(6);

#wordsContainer * {
  outline: 1px solid #000;
  padding: 1rem;
  font: 1rem/1 sans-serif;
}

<div id="wordsContainer"></div>