1、首先打开hbuilder软件新建一个html文件,在html页面上创建一个点击的button按钮:
2、然后为button添加点击时创建一个新的div事件。使用“document.createElement()”创建一个新的div,接着使用innerHTML对新建的div设置内容,最后把div放到body显示:
3、在html里为button按钮添加宇哥点击创建div的事件,完成之后代码就写好了,接下来需要看看效果:
4、保存好html文件后使用浏览器打开,此时还没有创建div:
5、最后点击button按钮,会执行脚本创建div的事件,新的div就创建好了,顺利实现了给HTML标签添加了内容。以上就是用JS给HTML标签添加内容的 *** 作:
1、先用document.createElement方法创建一个input元素! var newInput = document.createElement("input")
2、设定相关属性,如name,type等
newInput.type=mytype
newInput.name="input1"
3、用appendChild方法,将元素追加到某个标签内容中!
TemO.appendChild(newInput)
<html >
<head>
<title>动态添加表单元素</title>
</head>
<script language="javascript">
function AddElement(mytype){
var mytype,TemO=document.getElementById("add")
var newInput = document.createElement("input")
newInput.type=mytype
newInput.name="input1"
TemO.appendChild(newInput)
var newline= document.createElement("br")
TemO.appendChild(newline)
}
</script>
<body>
<form action="" method="get" name="frm">
<div id="add">
<input type="text" name="textfield">
</div>
</form>
<input name="" type="button" value="新建文本框" onClick="AddElement('text')" />
<input name="" type="button" value="新建复选框" onClick="AddElement('checkbox')" />
<input name="" type="button" value="新建单选框" onClick="AddElement('radio')" />
<input name="" type="button" value="新建文件域" onClick="AddElement('file')" />
<input name="" type="button" value="新建密码框" onClick="AddElement('password')" />
<input name="" type="button" value="新建提交按钮" onClick="AddElement('submit')" />
<input name="" type="button" value="新建恢复按钮" onClick="AddElement('reset')" />
</body>
</html>
运行效果:
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html,填充问题基础代码。
2、在index.html中的<script>标签,输入js代码:$('#txt').val('添加值')$('#txt').attr('data','test')。
3、浏览器运行index.html页面,此时input元素成功被添加了值和属性。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)