js 动态加入input效果实现

最新推荐文章于 2022-11-11 19:13:40 发布
最新推荐文章于 2022-11-11 19:13:40 发布
阅读量1.2k 收藏
点赞数
文章标签： input javascript function file delete div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_mo/article/details/2247078
版权

<html>
    <head>
        <style type="text/css">
            #upload{
             TEXT-ALIGN: left;BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 6em; PADDING-LEFT: 15px; BACKGROUND: #f1f3f5; PADDING-BOTTOM: 15px; MARGIN-LEFT: auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 430px; MARGIN-RIGHT: auto; PADDING-TOP: 15px; BORDER-BOTTOM: #cccccc 1px solid;font-size:12px;
            }
            #ctrl{TEXT-ALIGN: center;}
        </style>
        <title>
            动态加入span效果
        </title>
        <script>
            function $(pKey){
                return document.getElementById(pKey);
            }
            var i=4;
            function add_file(){
                 var span = document.createElement('span');
                 var fileid = 'temp_file'+i;
                 span.setAttribute('id',fileid);
                 span.innerHTML = "<input type='text' name ='f"+fileid+"' value=''></input><a href=javascript:delete_file('"+fileid+"')>dele</a><br>";
                 document.getElementById("message").appendChild(span);
                 i++;
            }
            function delete_file(pNode){
              var obj = $(pNode);
              $("message").removeChild(obj);
            }
        </script>
        <noscript>您的浏览器不支持JavaScript。</noscript>
    </head>
    <body>
        <div id="ctrl">
            <div id="message">  

            </div>

            <a href="javascript:add_file()">添加</>

            <a href="javascript:alert(document.getElementById('message').innerHTML)">查看</>

 

        </div>

 


    </body>   
</html>
 

y_mo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中动态加载div/input....
10-26
js动态加载 .......... javascript动态添加,以及java后台获取数据.
js添加input
Neil的专栏
07-01 4082
div> function InsertProduct() { for (var i = 0; i var tb = document.getElementById("productTable"); var refRow = tb.rows.length - 1; var newRefRow = tb.insertRow(refRow); var checkboxid = doc
js动态创建input框
weixin_41692437的博客
03-02 5053
1.html代码 <div id="details_p"> <div class="form-inline"> <label><input class="checkbox" type="checkbox" name="link" id="link_check">link<input type="text" name="link_value" placeholder="0" ></label> <inp
js实现 input 框的动态赋值
热门推荐
qq_39835505的博客
03-19 1万+
转载地址 https://blog.csdn.net/wilson_m/article/details/79510017 <input id="name1" name="teacherName" type="text" /> 通过以下js代码可以实现对input文本框进行赋值，以下方法分别针对不同的情况，但是前两种是通用的。 $('#name1').val('值'); docu...
动态生成input
enmmmm的博客
08-26 1381
动态生成input标签很容易，我们只需要使用v-for指令，给定要生成input数量的值num，如下 但是上面动态生成的input标签，若改变其中一个input框的值，其他input框的值会随之一起改变，因为他们绑定了同一个值value， 解决上述问题的方法是：我们可以构造出一个生成上述input框的对象，给每一个input框绑定该对象的不同属性的值。如下： ...
基于javascript实现页面加载loading效果
10-22
接着定义了count()函数，这个函数是实现动态加载效果的关键。在count()函数中，通过递增bar变量来改变百分比的数值，并且用line变量不断拼接出新的进度条字符，然后更新到表单中的对应文本框内显示。 为使加载效果...
JavaScript实现为input与textarea自定义hover,focus效果的方法
12-10
这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果，hover也就是鼠标放上去之后的效果，focus是鼠标焦点问题，要实现 这种效果，需要JS来配合，这个例子就是很不错的，它把网页上输入框和...
jquery实现input搜索输入关键词后自动筛选相关信息效果
11-11
在本教程中，我们将深入探讨如何利用jQuery来实现一个搜索输入框的功能，当用户在input框中输入关键词时，能自动筛选并显示与之匹配的相关信息。 首先，我们需要在HTML中设置一个input元素作为搜索框，并且定义一个...
JS实现的input选择图片本地预览功能示例
10-18
本篇文档主要介绍如何使用JavaScript实现一个图片选择和本地预览的功能。这个功能允许用户在不上传图片的情况下，直接在网页上查看自己所选的图片。具体实现过程涉及HTML、CSS以及JavaScript的多方面知识，包括表单...
动态添加input
10-09
动态添加input
javascript实现的动态添加表单元素input,button等(appendChild)
10-30
给大家介绍了javascript实现的动态添加表单元素input,button等(appendChild)的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
JS把内容动态插入到DIV的实现方法
10-21
下面小编就为大家带来一篇JS把内容动态插入到DIV的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5 canvas酷炫的文本输入框动画特效
11-06
html5 canvas酷炫的文本输入框动画特效 html5 canvas酷炫的文本输入框动画特效
js实现input框文字动态变换显示效果
10-23
主要介绍了js实现input框文字动态变换显示效果,涉及javascript随机字符串与中文的动态切换显示效果,具有一定参考借鉴价值,需要的朋友可以参考下
用JavaScript编写动态输入框
最新发布
qiandaiyangzi的博客
11-11 1044
用JavaScript编写动态输入框
动态添加input输入框
可乐伢
08-16 3010
动态添加单个input框 <template> <div v-for="(i, j) in list" :key="j"> <p>人员姓名：</p> <p><input type="text" v-model="userName[j]" placeholder="请输入人员姓名"></p> </div> <button @click="AddPeople">添加人员<
CSS+JS实现input动态框效果
k1_maple的博客
10-16 674
用几行代码完成一个好玩的Input效果
JS动态创建input
qq_42689281的博客
06-29 2749
<!DOCTYPE html> <html> <head> <title>HAOHAO</title> <style type="text/css"> </style> </head> <body> <div id="div"> <input type="button" name="add_input" value="增加" onclick="addInput();"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值