从 JS 创建 HTML 元素答案

【问题标题】：Creating HTML elements from JS let从 JS 创建 HTML 元素
【发布时间】：2019-05-14 07:46:05
【问题描述】：

我正在尝试创建多个 span 元素，其中包含 .，但发现下面的代码创建了 3 个 . 但没有 span。

let loadingDots = '';
for (let i = 0; i < 3; i += 1) {
  const dot = document.createElement('span');
  loadingDots += dot.innerHTML = '.';
  document.body.appendChild(dot);
}

如何修复上述代码以将HTML 从loadingDots 输出为

<span>.</span><span>.</span><span>.</span>

为了在查看 cmets 时提供更多背景信息，这可能在某些方面可以正常工作。

代码在 React component as 中使用

class ...

  render() {
    let loadingDots = '';
    for (let i = 0; i < 8; i += 1) {
      const dot = document.createElement('span');
      dot.innerHTML = '.';
      loadingDots += dot.outerHTML;
    }

    return (
      <Fragment>
        {loadingDots}
      </Fragment>
    );
  }
}

loadingDots 的当前return 元素是...

我尝试的另一种方法是

let loadingDots = '';
for (let i = 0; i < 8; i += 1) {
  loadingDots += '<span>.</span>';
}

但这返回为"..." 而不是...

【问题讨论】：

我将您的代码块转换为代码 sn-p 以便更快地测试您的代码。在我看来，这是完美的工作。如果你检查生成的 HTML，它会给你三个.。
Best way to create large static DOM elements in JavaScript?的可能重复
我复制了您的代码并在我的浏览器上运行。它确实会生成 3 个.。
正如其他人所提到的，有 3 个跨度，主体上附加了一个点。但我不清楚loadingDots 变量的用途。那个将包含 3 个没有跨度的点，但您似乎没有使用它。
谢谢@KévinBibollet。我已更新问题以包含场景并更好地解释我的问题。

标签： javascript

【解决方案1】：

因为变量赋值 dot.innerHTML = "." 返回值 (.)，并且用在 += 中。所以该行等于：

loadingDots += ".";

分两行：

dot.innerHTML = ".";
loadingDots += dot.outerHTML;

【讨论】：

谢谢。我之前尝试过，但它返回 "..." 而不是 ...

【解决方案2】：

我认为我的问题是因为我在 React component 中使用。

我在jsx 的 React 文档中的 Functions as Children 找到了解决方案。

const LoadingDots = props => {
  const items = [];
  for (let i = 0; i < props.numTimes; i += 1) {
    items.push(props.children(i));
  }
  return <span>{items}</span>;
};

然后在jsx组件内部

<LoadingDots numTimes={3}>
  {index => <span key={index}>.</span>}
</LoadingDots>

【讨论】：