无法控制.cloneNode（）之后.appendChild（）的位置 _位置

知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述无法控制.cloneNode（）之后.appendChild（）的位置相关的知识，希望能为你提供帮助。
首先，抱歉，代码不会在摘要中运行。无论是Codepan还是jsfiddle。我仍将其上传到这里，但请尝试在本地运行。我正在WebStorm中使用Angular CLI项目。
我想在我的应用中执行的操作是创建类似待办事项列表。单击“创建新列表”时，应在其旁边创建一个新的矩形（待办事项卡）。不在下面，不在上面，但是在右边。
我做了.cloneNode()和.appendChild()。它可以解决问题，但是我的问题是我无法控制.appenChild()结果的位置。它总是将新的待办事项卡插入到现有的待办事项卡之下。
[请有人给我带来和平！

import { Component } from '@angular/core' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'ShoppingList'; // application name products = []; // array declaration itemToAdd; itemToRemove; /* --- adds an item in the array --- */ addNewItem () { if (this.itemToAdd !== null) { this.products.push(this.itemToAdd) } } /* --- removes all items from array --- */ removeItem () { const index = this.products.indexOf(this.itemToRemove) if (index > -1) { this.products.splice(index) } } /* --- creates new list--- */ createNewList () { const elementToClone = document.getElementById('listCard') const clone = elementToClone.cloneNode(true) document.getElementById('mainContent').appendChild(clone) console.log(this.products) console.log(clone) } }

.mainContent { display: flex; flex-direction: column; align-items: center; border: 1px solid black; } ul { list-style: none none; margin-left: 0; padding-left: 0; } .listCard { width: 200px; height: 300px; border: 1px solid black; border-radius: 5px; margin: 20px; } .listTextAndButtons { display: flex; flex-direction: column; border: 1px solid black; padding: 5px; margin: 0 20px 20px 20px; } .textAreas { display: flex; } .addRemoveButtons { display: flex; align-items: center; justify-content: center; } .createNewListButton { display: flex; justify-content: center; } textarea { margin: 5px; border: 1px solid #767676; border-radius: 4px; } button { margin: 5px; width: 70%; height: 30px; border: 1px solid #767676; border-radius: 4px; }

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> ShoppingList< /title> < base href="https://www.songbingjia.com/"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="icon" type="image/x-icon"> < script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> < /script> < /head> < body> < div id="mainContent" class="mainContent"> < div id="listCard" class="listCard"> < /div> < div class="listTextAndButtons"> < label class="textAreas"> < textarea [(ngModel)]="itemToAdd"> < /textarea> < textarea [(ngModel)]="itemToRemove"> < /textarea> < /label> < div class="addRemoveButtons"> < button (click)="addNewItem()"> Add New Item!< /button> < button (click)="removeItem()"> Remove an Item!< /button> < /div> < div class="createNewListButton"> < button (click)="createNewList()"> Create a New List!< /button> < /div> < /div> < /div> < /body> < /html>

答案中使用Angular CLI项目[这里，我创建了一个stackblitz，请看一下。我删除了

< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> < /script>

显然是使用angular 2+，从HTML模板开始
【无法控制.cloneNode（）之后.appendChild（）的位置】关于flexbox，我为listCard提供了max-width属性，并设置了flex-wrap：wrap在.listTextArea上，默认情况下方向是行，因此新项目将被添加到右边，直到它们达到max-width，然后包裹在新线。对于flexbox，我总是指此CSS Tricks article