JS动态添加div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS动态添加div相关的知识，希望对你有一定的参考价值。
被添加的div都是一下子就出现了，有没有什么办法做一些过渡的动画效果。
参考技术A <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fadeIn animation: fadeIn .3s linear forwards; background-color: red; height: 100px; margin-bottom: 10px;
@keyframes fadeIn
0% opacity: 0; height: 0
100% opacity: 1; height: 100px
</style>
</head>
<body>
<button id='button'>插入一个div</button>
<div id="content">
</div>
<script>
window.addEventListener('load', function()
var i = 0
var button = document.getElementById('button')
var conntent = document.getElementById("content")
button.addEventListener('click', function(e)
var div = document.createElement('div')
div.textContent = i++
div.className = 'fadeIn'
conntent.appendChild(div)
)
)
</script>
</body>
</html>本回答被提问者和网友采纳
js如何动态添加onclick。
var img = document.createElement("img");
js创建了一个img图片标签，我还想给他添加一个方法onclick=“alert()"
如何实现》？、
<html>
<head>
<script type="text/javascript">
function bindEvent()
var d1 = document.getElementById("d1");
d1.onclick = function()
console.log(this.innerHTML);
var d2 = document.getElementById("d2");
d2.onclick = function()
console.log(this.innerHTML);
window.onload = bindEvent;
</script>
</head>
<body>
<div id="d1">1111</div>
<br />
<div id="d2">2222</div>
</body>
</html>追问
onclick =function() alert(); 这个后面需要加上分号吗？；
参考技术B function add(e)var container = document.getElementById('content');
var text = document.getElementById(e).innerHTML;
var newNode = document.createElement("span");
newNode.innerHTML = text;
container.appendChild(newNode);
var ui =document.getElementById(e);
ui.style.visibility="hidden";
// 加上这段就可以了
newNode.onclick = function()
container.removeChild(this);
ui.style.visibility="visible";
追问
onclick =function() alert(); 这个后面需要加上分号吗？；
参考技术C img.onclick = functiong()alert('test');
本回答被提问者采纳
以上是关于JS动态添加div的主要内容，如果未能解决你的问题，请参考以下文章