Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >js 动态添加元素

js 动态添加元素

作者头像
黄啊码
发布于 2020-05-29 02:49:38
发布于 2020-05-29 02:49:38
19.7K00
代码可运行
举报
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
该例子的样式用的是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
代码运行次数:0
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
原生js动态添加元素
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152106.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
6.8K0
js动态创建div等元素实例
为了节省时间,就直接贴代码了!希望大家多多的关注我! <html> <head> <title>js动态创建div等元素实例</title> <style type="text/css"> </style> </head> <body> <script language="javascript"> var Test={ createDiv:function(){ var div = document.createElement
业余草
2019/01/21
12.3K0
JS动态添加表单
<script type=”text/javascript”> function addRow()<!–js实现添加一行内容!–> { var tr=document.createElement(“tr”); var td=document.createElement(“td”); var input=document.createElement(“input”); input.setAttribute(“type”,”file”); input.setAttribute(“name”,”image[]”)
苦咖啡
2018/05/07
13.8K0
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
上一博文种讲解了JavaScript基础的ECMAScript,包括基本语法和部分对象,本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件,后文中有对应的实战练习。
Winter_world
2020/09/25
2.2K0
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
easy的jsp的增删改查在一个jsp页面上
easy的jsp的增删改查在一个jsp页面上
Java架构师必看
2021/05/14
4.6K0
HTML-JavaScript动态添加元素appendChild
开始自学一下前端的基础知识,这里记录一下知识点,毕竟不熟,不记录很容易就忘记了。前端最佳的学习资料就是在MDN,没有之一。
傅_hc
2020/02/18
1.9K0
HTML-JavaScript动态添加元素appendChild
油猴脚本:快速打开粘贴的多个网址
你好,我是喵喵侠。今天我将为你介绍一个非常实用的油猴脚本,可以帮助你快速打开多个粘贴的网址链接。在日常工作中,我们可能会遇到需要批量打开多个网页的情况,如果手动逐个打开,不仅耗时费力,而且容易出错。为了提高效率,我们可以利用油猴脚本来自动化这一过程。
喵喵侠
2024/08/04
3170
油猴脚本:快速打开粘贴的多个网址
VML实现的饼图JavaScript类封装
本文由来源 21aspnet,由 javajgs_com 整理编辑,其版权均为 21aspnet 所有,文章内容系作者个人观点,不代表 Java架构师必看 对观点赞同或支持。如需转载,请注明文章来源。
Java架构师必看
2021/03/22
8950
golang学习之beego框架配合easyui实现增删改查及图片上传
demo目录: upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: 具体代码: <!DOCTYPE html> <html lang="en"> <head>
用户1141560
2017/12/26
1.9K0
golang学习之beego框架配合easyui实现增删改查及图片上传
SpringMVC+easyUI CRUD 添加数据C
接一篇文章,今天上午实现了添加数据。以下是Jsp。里面主要是看newUser()和saveUser().注意这函数里的url,newUser()里面去掉url属性。还要注意的一个问题
全栈程序员站长
2022/07/08
2370
MVC5+EasyUI+EF6增删改查以及登录登出的演示
创建StudentController、 及Index视图, 在Index上按F5运行
明志德道
2023/10/21
2610
MVC5+EasyUI+EF6增删改查以及登录登出的演示
学习js在线html(富文本)编辑器
你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤: 1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。 你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。 <iframe id="myEditer" width="100%" height="150px"></iframe> <script>myEditer.document.designMode = 'on';</scri
deepcc
2018/05/16
20K0
javaScript动态添加Li元素「建议收藏」
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152096.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
2.2K0
EasyUI使用笔记——Datagrid的使用及排序
Datagrid的使用: 添加一个table,其中class设置为easyui-datagrid,在data-options中设置datagrid的参数,我这里是这样写的:
徐大嘴
2019/03/21
1.5K0
js封装好的模仿qq消息弹窗代码
在我们的日常开发中,或者生活中,经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。
业余草
2019/01/21
4.8K0
使用node.js如何简单快速的搭建一个websocket聊天应用
初始化项目 npm init 安装nodejs-websocket npm install nodejs-websocket 创建并编辑启动文件 创建一个名为app.js文件,并且编辑它。 var ws = require("nodejs-websocket"); console.log("开始建立连接...") var [user1,user2,user1Ready,user2Ready] = [null,null,false,false]; ws.createServer(function(
Vam的金豆之路
2021/12/01
6260
使用node.js如何简单快速的搭建一个websocket聊天应用
三种图表技术SVG、Canvas、WebGL 3D比较
因为前两项都是描述2D图形的,而WebGL是描述3d的,所以以下针对SVG和Canvas做比较。
IT人一直在路上
2019/09/16
3.8K0
Vue项目图片剪切上传——vue-cropper的使用
最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求。上网百度了一番,发现好多用的都是vue-cropper。我也就用了,个人感觉还是挺好用的。现在在这里用一个简单的小demo演示一下vue-cropper的使用方法。
用户1174387
2018/08/01
3.5K0
Vue项目图片剪切上传——vue-cropper的使用
JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
一:用最底层的方式,该方式用来创建别的对象树也可以 代码演示: <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式,其实该方式用来创建别的对象树也可以</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> table{ border:#ff80ff;
谙忆
2021/01/21
6650
JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
2.3.1 基于easyUI框架写加法器
    easyUI是一个第三方控件库,内容很全面。比如我们做一个加法计算程序,打开其官网,找到示例修改到自己想要的结果。先找到其相关内容:
周星星9527
2018/08/07
5530
2.3.1 基于easyUI框架写加法器
相关推荐
原生js动态添加元素
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文