javascript - 如何拆分内容并附加在 HTML 标签中

Question

我有这个 HTML 代码:

<div id="postFull">
        <!-- Capa -->
        <h1>testando conteúdo</h1>
        <p>testando conteudo</p>

        <hr>

        <!-- Conteúdo 1 -->
        <h2>testando conteudo com h2 - 1</h2>
        <p>testando conteudo com p para h2 - 2</p>

        <hr>

        <!-- Conteúdo 2 -->
        <h2>testando conteudo com h2 - 1</h2>
        <p>testando conteudo com p para h2 - 2</p>

        <br><br>
    </div>

如何在每个

---

标记后拆分内容并将每个拆分内容 block 附加到另一个 HTML 标记中，如下所示:

<article id="splitContent">
    ... input each block of content here (could be anothers articles)
</article>

感谢您的帮助。最好的!

Answer 1

您可以使用 grid layout实现这一目标

(function() {
  let articles = [{
    title: 'testando conteudo com h2 - 1',
    content: 'testando conteudo com p para h2 - 1'
  }, {
    title: 'testando conteudo com h2 - 2',
    content: 'testando conteudo com p para h2 - 2'
  }];
  let splitContent = document.getElementById('splitContent');

  articles.forEach(e => {
    let div = document.createElement('div');
    div.innerHTML = `
      	<article>
      		<h2>${e.title}</h2>
      		<p>${e.content}</p>
    		</article>
      `;
    splitContent.append(div);
  });
})();

#splitContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

article {
  background: #ccc;
  padding: 1em;
}

<div id="postFull">
  <!-- Capa -->
  <h1>testando conteúdo</h1>
  <p>testando conteudo</p>

  <hr>

  <div id="splitContent"></div>

</div>