Question

我想动态地将已定义的“旧div”标签的内容附加到“new div”标签，但由于我是javascript的新手，我不知道如何执行此操作。我试过的代码附在下面。还有一个问题，如何动态删除附加的div标签？

<html>
<head>
<script type="text/javascript">

function add() {

var i = document.getElementById( 'old' );
var d = document.getElementById( 'new' );
d.appendChild( i );
}
</script>

</head>
<body>
<div id="old">
Content of old div
</div>

<div id="new">
</div>
<button onclick="add">Add</button>
</body>
</html>

Answer 1

执行：

var iContent = document.getElementById( 'old' ).innerHTML;
document.getElementById( 'new' ).innerHTML = iContent; // assuming you already have new div

Answer 2

您的代码是正确的，除了一件事。将按钮标记更改为：

<button onclick="add();">Add</button>

以下代码中新div周围的水平线将清楚地显示它正在工作。

<html>
    <head>
        <script type="text/javascript">

            function add() {
                console.log("In add");
                var i = document.getElementById( 'old' );
                var d = document.getElementById( 'new' );
                d.appendChild( i );
            }
        </script>

    </head>
    <body>
        <div id="old">
            Content of old div
        </div>

        <hr/>
        <div id="new">
        </div>
        <hr/>
        <button onclick="add();">Add</button>
    </body>
</html>

希望这能解决您的问题。

Javascript动态附加DIV标记

2 个答案: