javascript - 使用cloneNode重复Polymer中的div元素

Question

我正在生成一个表单，并且可以根据用户的输入重复表单的一个部分，即单击按钮会添加重复的表单部分以输入更多信息。我正在使用cloneNode，因为表单部分包含我想要“复制”的HTML。当我单击按钮一次时，该部分就会被复制。但是，当我第二次单击该按钮时，原始表单和先前克隆的节点的内容都会被克隆。因此，不是添加一个新部分，而是添加两个新部分。单击第三个按钮将添加四个新部分。 Polymer 元素的代码如下:

<dom-module id="services-block">
<template>
<style>
    .horizontal-section {
        min-width: 130px;
    }
    paper-button {
        margin-bottom: 24px;
    }
    paper-button.colorful {
        color: #4285f4;
        width: 150px;
    }
</style>
<div id="myDiv">
    <h3>Services</h3>
    <div id="mainDiv">
        <paper-input name="@context" hidden value="https://raw.githubusercontent.com/Network-of-BioThings/smartAPI/master/schema/smartAPI.api.jsonld"></paper-input>
        <paper-input name="service-name" label="* Name" required type="string"></paper-input>
        <paper-input name="service-description" label="Description" type="string"></paper-input>

         <p>HTTP Method</p>
         <input list="httpMethod" name="HTTP Method" label="HM Test">
         <datalist id="httpMethod">
            <option value="GET">
            <option value="PUT">
            <option value="POST">
            <option value="DELETE">
        </datalist>
        </div>
    </div>
<paper-button class="colorful" raised on-click="repeatDiv">Add</paper-button>
<paper-button class="colorful" raised on-click="deleteDiv">Remove</paper-button>
</template>

<script>
Polymer({
    is: "services-block",
    repeatDiv: function() {
        console.log("** Add services block")
        var div = document.getElementById('myDiv');
        clone = div.cloneNode(true);
        clone.id = "some_id";
        document.getElementById("myDiv").appendChild(clone);
    }
});
</script>
</dom-module>

Answer 1

您将克隆添加为 myDiv 的子级，因此当您第二次复制 myDiv 时，您将复制它及其子级。可能需要更改为

document.getElementById("myDiv").parentNode.appendChild(clone);