前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js 动态添加元素

js 动态添加元素

作者头像
黄啊码
发布2020-05-29 10:49:38
19.7K0
发布2020-05-29 10:49:38
举报
文章被收录于专栏:黄啊码【CSDN同名】
代码语言:javascript
复制
该例子的样式用的是easyui的样式,看不懂只需把class="easyui-XXX" 删除即可
<div class="fitem" id="urls" style="margin-bottom:5px;">
    <label>url:</label>
    <input id="url" name="url" class="easyui-textbox" style="width: 260px" >
    小标题:
    <input id="url_title" name="url_title" class="easyui-textbox" style="width: 260px;" >
    <a href="javascript:void(0);"class="easyui-linkbutton" iconCls="icon-add" οnclick="addinput()"></a>
    <div class="fitem"></div>
</div>
代码语言:javascript
复制
function addinput(){
    var temp = document.createElement('div');
    temp.className="fitem";
    var urls = document.getElementById("urls");
    urls.appendChild(temp);
    var url_to  = document.createElement("input");
    url_to.type ="text";
    url_to.id   ="url";
    url_to.style.width="260px";
    url_to.style.borderRadius="5px";
    url_to.style.border="1px";
    url_to.style.borderColor="#95b8e7";
    url_to.style.borderStyle="solid";
    url_to.style.height="22px";
    var title_to  = document.createElement("input");
    title_to.type ="text";
    title_to.id   ="url_title";
    title_to.style.width="260px";
    title_to.style.borderRadius="5px";
    title_to.style.border="1px";
    title_to.style.borderColor="#95b8e7";
    title_to.style.borderStyle="solid";
    title_to.style.height="22px";
    url_to.style.marginLeft="65px";
    title_to.style.marginLeft="49px";
    temp.appendChild(url_to);
    temp.appendChild(title_to);
}

最终效果如下

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/07/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档