怎么用JS给HTML标签添加内容

怎么用JS给HTML标签添加内容,第1张

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元素成功被添加了值和属性。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11632548.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存