JS实现添加删除Div

动态DOM操作示例

最新推荐文章于 2023-03-18 16:56:57 发布

原创最新推荐文章于 2023-03-18 16:56:57 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #XHTML #JavaScript #Web #UI #ViewUI

本文通过一个简单的HTML页面展示了如何使用JavaScript动态地添加和删除页面元素。用户可以通过点击按钮来增加或减少显示特定文本的红色方块。


<html>
<head>
</head>
<body>
<div id='div1'></div>
<input type = 'button' onclick='addElement()' value='我手贱~添一个元素~我手贱~'>    
<input type = 'button' onclick='dropElement()' value='嗯，我删死你！！'>    
</body>
<script>
  var i = 1;
  function addElement(){
    var div = document.createElement('div');
    div.style.backgroundColor = 'red';
div.style.fontSize = '100px';
div.innerHTML = '嘿嘿~你删我啊~你删我啊~~';
div.id = 'Elem'+i;
document.getElementById('div1').appendChild(div);
i++;
  }
  function dropElement(){
    var aaa = document.getElementById('Elem'+(i-1));
document.getElementById('div1').removeChild(aaa);
i--;
  }

</script>
</html>