在删除之前，如何将通过单击函数创建的div附加到另一个div？Javascript_Javascript_Html_Css

在删除之前，如何将通过单击函数创建的div附加到另一个div？Javascript

javascript html css

在删除之前，如何将通过单击函数创建的div附加到另一个div？Javascript,javascript,html,css,Javascript,Html,Css,单击功能会创建一个，并在屏幕的另一侧设置动画。之后，在“animationend”上，它将被删除。但是，我想将“animationend”或“animationstart”上创建的元素附加到我最近点击的div/class上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="vi

单击功能会创建一个

，并在屏幕的另一侧设置动画。之后，在

“animationend”

上，它将被删除。但是，我想将

“animationend”

或

“animationstart”

上创建的元素附加到我最近点击的div/class上

        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
        href="https://fonts.googleapis.com/css?family=Raleway"
        rel="stylesheet"
        />
        <link rel="stylesheet" href="./assets/css/style.css" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Tap Music</title>
    </head>
  <div class="recent">
    <h2>Recent Taps</h2>
    <hr />
    <span id="recentTaps" class="recentTaps">stuf</span>
  </div>
  <div class="visual"></div>
  <div class="pads">
    <div class="pad1">
      <audio src="./assets/sounds/bubbles.mp3" class="sound"></audio>
    </div>
    <div class="pad2">
      <audio class="sound">
        <source src="./assets/sounds/ufo.mp3" />
      </audio>
    </div>
    <div class="pad3">
      <audio class="sound">
        <source src="./assets/sounds/clay.mp3" />
      </audio>
    </div>
    <div class="pad4">
      <audio class="sound">
        <source src="./assets/sounds/confetti.mp3" />
      </audio>
    </div>
    <div class="pad5">
      <audio class="sound">
        <source src="./assets/sounds/glimmer.mp3" />
      </audio>
    </div>
    <div class="pad6">
      <audio class="sound">
        <source src="./assets/sounds/moon.mp3" />
      </audio>
    </div>
</section>

CSS如下所示：

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    body {
    font-family: "Montserrat", sans-serif;
    }

    hr {
    border: 1px solid black;
    width: 75%;
    }

    .recent {
    height: 10vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    }

    .recent span {
    width: 100%;
    display: flex;
    }

    .app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    }

    header h1 {
    margin: 50px 0px 30px 0px;
    text-align: center;
    font-size: 40px;
    }

    header p {
    font-size: 20px;
    }

    .pads {
    background: lightblue;
    width: 100%;
    display: flex;
    }

    .pads > div {
    height: 100px;
    width: 100px;
    flex: 1;
    }

    .pad1 {
    background: #60d394;
    }

    .pad2 {
    background: #d36060;
    }

    .pad3 {
    background: #c060d3;
    }

    .pad4 {
    background: #d3d160;
    }

    .pad5 {
    background: #6860d3;
    }

    .pad6 {
    background: #60b2d3;
    }

    .visual > div {
    position: absolute;
    bottom: 0%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    transform: scale(1);
    z-index: -1;
    }

    @keyframes jump {
    0% {
        bottom: 0%;
        left: 20%;
    }
    33% {
        bottom: 60%;
        left: 20%;
    }
    66% {
        bottom: 60%;
        left: 80%;
    }
    100% {
        bottom: 0%;
        left: 80%;
    }
    }

我在

“animationend”

上尝试了

appendChild（）

，反之亦然。控制台给了我一个错误。我也尝试过，

append（）

。我将在删除另一个div之前在其上添加一个append，同时仍然删除在原始div上创建的元素。

a.removeChild（b）

，因此您可以执行

newParent.appendChild（currentParent.remove（child））

谢谢，在我添加了该注释并将其添加到我的另一个div之后，我能够使用

：：before

在其上添加一些css。

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    body {
    font-family: "Montserrat", sans-serif;
    }

    hr {
    border: 1px solid black;
    width: 75%;
    }

    .recent {
    height: 10vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    }

    .recent span {
    width: 100%;
    display: flex;
    }

    .app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    }

    header h1 {
    margin: 50px 0px 30px 0px;
    text-align: center;
    font-size: 40px;
    }

    header p {
    font-size: 20px;
    }

    .pads {
    background: lightblue;
    width: 100%;
    display: flex;
    }

    .pads > div {
    height: 100px;
    width: 100px;
    flex: 1;
    }

    .pad1 {
    background: #60d394;
    }

    .pad2 {
    background: #d36060;
    }

    .pad3 {
    background: #c060d3;
    }

    .pad4 {
    background: #d3d160;
    }

    .pad5 {
    background: #6860d3;
    }

    .pad6 {
    background: #60b2d3;
    }

    .visual > div {
    position: absolute;
    bottom: 0%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    transform: scale(1);
    z-index: -1;
    }

    @keyframes jump {
    0% {
        bottom: 0%;
        left: 20%;
    }
    33% {
        bottom: 60%;
        left: 20%;
    }
    66% {
        bottom: 60%;
        left: 80%;
    }
    100% {
        bottom: 0%;
        left: 80%;
    }
    }