动态地在Div标签上追加另一个Div数据

JavaScript Appending another Div data on Div Tag Dynamically

本文关键字：Div 追加 另一个 数据 标签 动态      更新时间：2023-09-26

我想动态地将已经定义的"旧div"标签的内容附加到"新div"标签，但它不起作用。我尝试的代码如下所示。还有一个问题，如何动态移除附加的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>

试试这个

var i = document.getElementById( 'old' );
var d = document.getElementById( 'new' );
d.innerHTML += i.innerHTML;

好了，我解决了。我的代码有些错误。它现在起作用了。

    <html>
    <head>
        <script type="text/javascript">
            function add() {
        var i = document.getElementById( 'old' );
        var d = document.createElement( 'div' );
        d.id = "new1";
        d.innerHTML = i.innerHTML ;
        var p = document.getElementById('new');
        p.appendChild(d);
    }
    function removeLocation() {
        var d = document.getElementById( 'new1' );
        var p = document.getElementById('new');
        p.removeChild(d);
    }
        </script>
    </head>
    <body>
        <div id="old">
            Content of old div
        </div>
        <hr/>
        <div id="new">
        </div>
        <hr/>
        <button onclick="add();">Add</button><br>
        <button onclick="removeLocation();">Remove</button>
    </body>
    </html>
相关文章：