//    在body下创建一个div

  var createDiv=document.createElement("div");

    createDiv.id='id_i';

    createDiv.class="class_c";

    document.body.appendChild(createDiv);

 //    在之前创建的Div下创建一个img元素

    var createImg = new Image();

    createImg.id ='img';

    createImg.class = "img";

    document.querySelector('#img'+i).appendChild(createImg);

【JavaScrpt】用js创建html上的元素的更多相关文章

  1. js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

    应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...

  2. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  3. js创建元素

    js创建多条数据,插入到页面中的方法. 方法一: 执行时间大概在35ms左右. 这个就属于使用字符串拼接之后,再一次性的插入到页面中.缺点是,容易导致事件难以绑定. 方法二: 执行时间不定,最少的在8 ...

  4. CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  5. Slip.js – 在触摸屏上实现列表的滑动排序功能

    Slip.js 是一个很小的 JavaScript 库,用于实现对触摸屏的互动 Swipe 和对元素重新排序列表(Reordering).Slip.js 没有任何的依赖,你可以通过自定义 DOM 事件 ...

  6. 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI

    原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...

  7. 通过JS动态的修改HTML元素的样式和增添标签元素等

    一. 通过JS动态的修改HTML元素的样式   1. 要想在js中动态的修改HTML元素的样式,首先需要写document,    document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...

  8. 使用js在页面上新建文件夹

    使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. js动态加载HTML元素时出现的无效的点击事件

    项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...

随机推荐

  1. Vue+koa2开发一款全栈小程序(8.图书列表页）

    1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/co ...

  2. Cucumber环境配置

    1.JDK下载和配置 2.Maven下载和环境配置 3.IDEA下载和Cucumber插件安装 下载地址官网,一般IDEA自带cucumber插件 如果没有安装过的话,点击以下进行搜索安装,安装完成后 ...

  3. GO语言系列（四）- 内置函数、闭包与高级数据类型

    一.内置函数.递归函数.闭包 内置函数 1. close:主要用来关闭channel 2. len:用来求长度,比如string.array.slice.map.channel 3. new:用来分配 ...

  4. django - 总结 - cnblog 知识点

    1.图像预览 点击头像------>点击input img和input重合; img在label,input-->display:none $("#avatar").c ...

  5. [高中作文赏析]妈妈, 我心中的"灯"

  6. [物理学与PDEs]第5章第3节 守恒定律, 应力张量

    5. 3 守恒定律, 应力张量 5. 3. 1 质量守恒定律 $$\bex \cfrac{\p \rho}{\p t}+\Div_y(\rho{\bf v})=0.  \eex$$ 5. 3. 2 应 ...

  7. MySQL5.6.39修改密码

    5.6.39 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server) step2: 进入终端输入:cd /usr/local ...

  8. 异常捕获try----catch

    如果try语句里有return,返回的是try语句块中变量值. 详细执行过程如下: 如果有返回值,就把返回值保存到局部变量中: 执行jsr指令跳到finally语句里执行: 执行完finally语句后 ...

  9. Leetcode#13. Roman to Integer（罗马数字转整数）

    题目描述 罗马数字包含以下七种字符:I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即 ...

  10. 可变与不可变类型数据，列表的copy方法

    我们先来了解一下可变与不可变类型的数据 (1)可变类型:列表,字典(内存中的数据允许被修改) 不可变类型:数字,字符串,元组(内存中的数据不允许被修改) 接着我们通过一个实例来看一看可变与不可变类型数 ...