1

元の要素の後にクローン要素を配置しようとしています。

いくつか調べて、クローンを作成する方法と、元のクローンの後にクローンを配置する方法を見つけましたが、それらを組み合わせることができないようです。

これが私のコードです：

<html>

<head>

<script type="text/javascript">

function onClickAdd() {

    var tableRow = document.getElementById("tableRow");
    var tableRowClone = tableRow.cloneNode(true);
    document.getElementById("tableRow").insertBefore(tableRowClone, tableRow.nextSibling);
}

</script>
</head>
<body>    
    <table>
        <tr id="tableRow">
            <td>
                <input type="text" name="textField">
            </td>
        </tr>

        <tr>
            <td>
                <input type="button" name="addButton" value="Add" onClick="Javascript:onClickAdd()">
            </td>
        </tr>
    </table>
</body>

</html>

私の期待する出力は次のようになります。addButtonをクリックするたびに、新しいテキスト入力フィールドがテキストフィールドのスタックの一番下に配置されます。ボタンはスタックの一部ではなく、常にスタックの下にある必要があります。

私はJavascriptの完全な初心者です。上記のコードは正しくない場合と正しくない場合があります。ありがとう！

4

3 に答える 3

5

選ぶ。:-)親ノードで呼び出します（もう一度検索する必要はありません）：

function onClickAdd() {

    var tableRow = document.getElementById("tableRow");
    var tableRowClone = tableRow.cloneNode(true);
    tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
//  ^^^^^^^^^^^^^^^^^^^--- changes here
}

もちろん、上記では無効なDOM構造が作成されます。これは、同じ値（）を持つ2つの行が作成され、値はドキュメント内で一意である必要があるためです。それで：id"tableRow"id

function onClickAdd() {

    var tableRow = document.getElementById("tableRow");
    var tableRowClone = tableRow.cloneNode(true);
    // Clear the `id` from the clone
    tableRowClone.id = ""; // To clear it, or include something to give it its own
    tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
//  ^^^^^^^^^^^^^^^^^^^--- changes here
}
于 2012-06-20T10:26:53.943 に答える
2

insertBefore親要素で使用する必要があります：

tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);

そして、を変更することを忘れないでくださいid。IDは一意である必要があります。
そして、インラインイベントでJavascript:は、廃止されました。ラベルとして解釈されているため、エラーは発生しません。

于 2012-06-20T10:26:03.803 に答える
1 
function onClickAdd() {
    var tableRow = document.getElementById("tableRow");
    var tableRowClone = tableRow.cloneNode(true);
    tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
}

そしてデモ。

于 2012-06-20T10:28:59.897 に答える