使用Javascript将一个div放入另一个div中

Question

使用Javascript将一个div放入另一个div中

4

如果你有一些空闲时间：

这是一个相当复杂的问题，或者我太天真了，因为我已经工作了几个小时，但没有得到所需的输出/结果，如果你有一些空闲时间，我希望你能帮助我。

首先，这是我拥有的数据，它是从 PHP 新闻源中检索出来的，因此不是固定数量的项目：

<span class="dateclass">date1</span>
<span class="dateclass">date2</span>
<span class="dateclass">date3</span>
....and so on
<br>
<div class="contentclass">content1</div>
<div class="contentclass">content2</div>
<div class="contentclass">content3</div>
....and so on

我需要使用类和ID进行工作，因为没有PHP模板引擎，所以我不能调用单个元素，代码分布在几个文件中，实现我所需的最简单的方法是通过JavaScript和它们的ID / Classes

我需要复制上面的数据，并使用Javascript微调数据，以实现最终结果，该结果应为：

<div class="frame">
  <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>
  <span class="timeline-date"> <span class="dateclass">date1</span> </span>
  <div class="timeline-content"> <div class="contentclass">content1</div> </div>
</div>
<div class="frame">
  <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>
  <span class="timeline-date"> <span class="dateclass">date2</span> </span>
  <div class="timeline-content"> <div class="contentclass">content2</div> </div>
</div>
<div class="frame">
  <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>
  <span class="timeline-date"> <span class="dateclass">date3</span> </span>
  <div class="timeline-content"> <div class="contentclass">content2</div> </div>
</div>

那些

并不存在于数据中以进行“转换”，但它们是样式的一部分，我也需要它们，但我还没有真正担心这些:(

我知道，这是个变化！但我已经接近结果了，我一直在使用以下代码的不同修改版本：

setTimeout(function() {
  var element = document.getElementById("unique_ID");
  element.innerHTML = "";
  Array.prototype.forEach.call(document.querySelectorAll(".contentclass"), function(e) {
    var example = element.appendChild(e.cloneNode(true));
  });
}, 300);

我没有发布我制作的所有版本，因为它们都没有进展，也没有起作用 :/ 我甚至认为我没有那些版本的副本

到目前为止，我尝试过但未成功的有：

将<span class="timeline-date">和<div class="timeline-content">添加ID，以便可以使用js进行操作
使用不同的div设置，以通过操作js代码实现最终结果，这意味着使用以下div / HTML排列来粘贴cloneNode结果，并添加一些元素，例如var div = document.createElement('div');与div.className + =“frame”;等。然而什么都不起作用。
我尝试通过javascript向在相同代码中创建的
添加ID，类似于：

.....（当然，是针对之前定义的计数器变量）

var div = document.createElement('div');
div.id = "id_frame"+counter;
counter++;

当我尝试使用 getElementById 和由 counter 生成的ID发送结果时，它并没有起作用。

我即将放弃，这对我来说相当复杂；P ...有什么建议吗？:(

就我所知，我最多只能做到像这样：

<div id="ID_unique">
  <div class="frame">
    <span class="timeline-date">date1</span>
  </div>
  <div class=" timeline-content">content1</div>
  <div class="frame">
    <span class="timeline-date">date2</span>
  </div>
  <div class=" timeline-content">content2</div>
  <div class="frame">
    <span class="timeline-date">date3</span>
  </div>
  <div class=" timeline-content">content3</div>
</div>

如果没有那些应该覆盖内容标签的<div class="frame">，实际上这与最终结果并不相差太远 :(

- Daniel Felipe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yahya el fakir · Accepted Answer

我认为你应该首先获取所有的 dateClasses 和 contentclass，然后逐一创建你的 frame：

var dateClasses = $('.dateClass'); // array of all your dateClasses
var contentClasses = $('.contentClasses'); // array of all your contentClasses

for(var i=0; i< Math.min(dateClasses.length,contentClasses.length); i++) {
     var frame = $("<div>", {class: "frame"}); // create your frame node
     var timeLineDate = $("<div">,{class: "timeline-date"});
     var timeLineContent = $("<div">,{class: "timeline-content"});

     //Append DateClass to your timeline-data:
     timeLineData.append(dateClasses[i]);

      //Append ContentClass to your timeline-content:
     timeLineContent.append(contentClasses[i]);

     //Append all to your frame
     frame.append(timeLineData);
     frame.append(timeLineContent);
}

我没有运行或测试它，但希望它能给你一个实现你想要的想法的思路。

希望它有所帮助。