html动态点击按钮加1减1如何实现_随笔

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中，输入html代码：

再输入js代码：

function fun(a) {

$('span').text(parseInt($('span').text()) + a)

}

3、浏览器运行index.html页面，此时点击加号按钮会增加span文本的数值，点击减号按钮会减少span文本的数值。

用js 参考一下这个代码

window.onload=function () {

var Odiv=document.createElement("div")//创建一个div

var Ospan=document.createElement("span") //创建一个span

Odiv.style.cssText="width:200pxheight:200pxbackground:#636363

text-align:centerline-height:220px" //创建div的css样式

//Odiv.id="box" //创建div的id为box

//Odiv.className="Box" //div的class为Box

Odiv.appendChild(Ospan) //在div内创建一个span

document.body.appendChild(Odiv) //在body内创建一个div

}

</script>

innerText是把对象内的所有内容都替换为文本，所以如果先添加radio，然后再用innerText，radio就会自然消失，被文本取代。

应该用appendChild的方式来添加文本，即：

var label = document.createElement("label")

var radio = document.createElement("input")

radio.type = "radio"

radio.name = "radio"// 名字随意

label.appendChild(radio)

var txt = document.createTextNode("一个radio")

label.appendChild(txt)

document.getElementById("Div").appendChild(label)// Div为父容器id

最后补充说一句：innerHTML和innerText 跟 appendChild 是两种不同的机制，最好不要混用！！！

欢迎分享，转载请注明来源：内存溢出

html动态点击按钮加1减1如何实现