Question

这是我的代码。

<div class="files" id="filesid"> //parent element
    <div class='file'>           //child element
         <i class='fa fa-folder icon-cog' ondblclick=newPage(this.id)></i>     
<br> 
    <span id='dirname1'></span>
    </div>
<div>

我尝试在父元素中添加一个以上的子元素，但由于有多个子元素，我没有获得确切的方法。

As shown in this image I want to append more folder with names with javascript.

如果有人知道，请告诉我们。提前非常感谢：）

Answer 1

尝试使用appendChild()

function addChild() {
  let div = document.getElementsByClassName('file')[0];
  let clone = div.cloneNode(true);
  clone.getElementsByTagName('span')[0].innerHTML = new Date().getTime();
  document.getElementById('filesid').append(clone);
}

.files {
  background: red;
  padding: 1em;
}

.file {
  background: yellow;
  margin-bottom: 1em;
}

.file:last-child {
  margin-bottom: 0em;
}

<button onclick="addChild()">Add More Child</button>
<div class="files" id="filesid">
  <div class='file'>
    <i class='fa fa-folder icon-cog'></i>
    <span>Child</span>
  </div>
  <div>

Answer 2

这是我的解决方法：

function go() {
  var parent = document.getElementById("filesid");
  var child = document.querySelector("#filesid div.file");
  var c = child.cloneNode(true);
  var span=c.querySelector("span");
  span.textContent=new Date();
  parent.appendChild(c);
}

<div class="files" id="filesid"> //parent element
	<div class='file'> //child element
		<i class='fa fa-folder icon-cog' ondblclick=newPage(this.id)></i>
		<br>
		<span id='dirname1'></span>
	</div>
<div>

 <button onclick="go()">
  go
 </button>

如何在JavaScript的父元素下添加更多添加子元素（一组子元素）作为一个元素？

2 个答案: