怎么创建元素并且添家事件

hhhct 2010-04-02 11:19:51

加入有一个 div
<div id="div"></div>

我想在这个div下添加3个div
第一个红色
第二个兰色
第3个黄色

第一个bing顶 function(){alert(1)}
第2个bing顶 function(){alert(2)}
第3个bing顶 function(){alert(3)}

这个该怎么写啊

...全文

104 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

hhhct 2010-04-07

打赏
举报

werwerwer

mykelly6 2010-04-02

打赏
举报

[Quote=引用 4 楼 hhhct 的回复:]
忘了提一个要求了
用jq
...........
[/Quote]
我服了，代码写出来了，自己都不会写成jQuery的。。

sohighthesky 2010-04-02

打赏
举报

[Quote=引用 5 楼 sohighthesky 的回复:]
JScript code
$("div").css({color:"#FF0000"}).html("红色").appendTo("#div")
[/Quote]
$("<div></div>").css({color:"#FF0000"}).html("红色").appendTo("#div")

sohighthesky 2010-04-02

打赏
举报

$("div").css({color:"#FF0000"}).html("红色").appendTo("#div")

hhhct 2010-04-02

打赏
举报

忘了提一个要求了
用jq
...........

sohighthesky 2010-04-02

打赏
举报

var div=document.getElementById("div");

var div1=document.createElement("div");

div1.innerHTML=" 红色";

div1.style.color="#FF0000";

div1.onclick=function(){alert(1)}

div.appendChild(div1);//另外两个相同

郭大侠_ 2010-04-02

打赏
举报



var ct=document.getElementById('div');

var div1=document.createElement("div");

div1.setattribute("style","background-color:red;");

ct.appendChild(div1);

daxian520 2010-04-02

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>�ޱ����ĵ�</title>

    </head>

    <body>

        <div id="div">

        </div>

        <script type="text/javascript">

            var oDiv = document.getElementById("div");

            oDiv.innerHTML = "<div>第一个红色</div><div>第二个兰色</div><div>第3个黄色</div>";

            var oDivChilds = oDiv.getElementsByTagName("div");

            oDivChilds[0].style.color = "red";

            oDivChilds[1].style.color = "blue";

            oDivChilds[2].style.color = "yellow";

            oDivChilds[0].onclick = function(){

                alert(1)

            };

            oDivChilds[1].onclick = function(){

                alert(2)

            };

            oDivChilds[2].onclick = function(){

                alert(3)

            };

            

        </script>

    </body>

</html>

諾临風 2010-04-02

打赏
举报

[Quote=引用 7 楼 mykelly6 的回复:]
引用 4 楼 hhhct 的回复:
忘了提一个要求了
用jq
...........

我服了，代码写出来了，自己都不会写成jQuery的。。
[/Quote]

呵。。。

passself 2010-04-02

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

#div{

	width:30px;

	height:10px;

	border:1px solid yellow;

}

.new{

	width:30px;

	height:10px;

	border:1px solid black;

	margin-left:15px;

	margin-top:2px;

}

#temp1{

	background:red;

}

#temp2{

	background:blue;

}

#temp3{

	background:#FF0;

}

</style>

<script src="jquery-1.3.2.js"></script>

<script>

$(document).ready(function(){

    $("#div").click(function(){

         for(var i=1; i<4;i++){

		     $(this).after("<div class='new' id=temp"+i+">"+"</div>");

			 var id="#temp"+ i;

			 $(id).click(show);// 绑定show函数

		 }

	});

    function show(){

	   alert("aaaaaaa")

	}

});

</script>

</head>



<body>

<div id="div"></div>

</body>

</html>

这样会好看些

vnetcbd 2010-04-02

打赏
举报

<div id="div"></div>

$(function(){
$('#id').html('<div></div> <div></div> <div></div>');
$('#id').find('div').eq(0).css({width:100px,height:80px,background:red})
.live('click',function(){
alert(1);
});
$('#id').find('div').eq(1).css({width:100px,height:80px,background:blue})
.live('click',function(){
alert(2);
});
$('#id').find('div').eq(2).css({width:100px,height:80px,background:yellow})
.live('click',function(){
alert(2);
});

})

passself 2010-04-02

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div{
width:30px;
height:10px;
border:1px solid yellow;
}
.new{
width:30px;
height:10px;
border:1px solid black;
margin-left:15px;
margin-top:2px;
}
#temp1{
background:red;
}
#temp2{
background:blue;
}
#temp3{
background:#FF0;
}
</style>
<script src="jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
$("#div").live("click",function(){
for(var i=1; i<4;i++){
$(this).after("<div class='new' id=temp"+i+">"+"</div>");
var id="#temp"+ i;
$(""+id+"").click(function(){
alert("sss");
});
}
});
});
</script>
</head>

<body>
<div id="div"></div>
</body>
</html>

5. **默认值和元数据**：依赖项属性可以设置默认值，并且可以通过元数据在不改变属性实现的情况下调整其行为，例如改变默认值、添加属性更改回调等。 6. **样式和模板**：依赖项属性是样式和模板的基础，允许通过...

而`PreviewKeyDown`是隧道路由事件，它先于`KeyDown`事件发生，并且在元素树中的所有元素中传播。 2. **KeyUp** 和 **PreviewKeyUp** 事件：当用户释放键盘按键时，这两个事件会被触发。同理，`KeyUp`是冒泡路由...

htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv...

7. **拖放功能**：通过draggable属性和drop事件，实现网页元素的拖放操作。二、CSS3 1. **选择器扩展**：新增了伪类（如:nth-child()、:nth-of-type()）和伪元素（如::before、::after），增强了选择器的灵活性。 ...

每个部分都是一个独立的div，并且都添加了相应的class，以便于我们应用CSS样式。 ```html 正面内容背面内容 ``` 在CSS中，我们需要设置`.card`的宽高以及`transform-style`属性，然后为`.front`和`.back`设置...