把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂。如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点,也容易理解。

  网页是由 html 标签一层层组成的,js 也可以动态添加一层层的诸如 div、li、img 这样的标签。其实,不管是什么 html 标签,js 动态创建的方法都差不多,接着就先从动态添加 div 开始。

 一、js 动态添加元素div

<div id="parent"></div>

  function addElementDiv(obj) {
    var parent = document.getElementById(obj);     //添加 div
    var div = document.createElement("div");     //设置 div 属性,如 id
    div.setAttribute("id", "newDiv");     div.innerHTML = "js 动态添加div";
    parent.appendChild(div);
  }   调用:addElementDiv("parent");

二、js 动态添加li

<ul id="parentUl"><li>原li</li></ul>

  function addElementLi(obj) {
    var ul = document.getElementById(obj);     //添加 li
    var li = document.createElement("li");     //设置 li 属性,如 id
    li.setAttribute("id", "newli");     li.innerHTML = "js 动态添加li";
    ul.appendChild(li);
  }   调用:addElementLi("parentUl");

  三、js 动态添加元素img

<ul id="parentUl"></ul>

  function addElementImg(obj) {
    var ul = document.getElementById(obj);     //添加 li
    var li = document.createElement("li");     //添加 img
    var img = document.createElement("img");     //设置 img 属性,如 id
    img.setAttribute("id", "newImg");     //设置 img 图片地址
    img.src = "/images/prod.jpg";     li.appendChild(img);
    ul.appendChild(li);
  }   调用:addElementImg("parentUl");

转载:http://www.liangshunet.com/ca/201408/336848696.htm

最新文章

  1. mybatis 使用记录(二) 动态拼接查询条件
  2. 部署额外域控制器,Active Directory
  3. 【LeetCode】273. Integer to English Words
  4. android图片切换ImageSwichter的动画切换效果
  5. 移动端H5页面之iphone6的适配
  6. 【Android】读取sdcard卡上的全部图片而且显示,读取的过程有进度条显示
  7. [原创].NET 分布式架构开发实战之一 故事起源
  8. Android项目实战(三十六):给背景加上阴影效果
  9. php代码审计一些笔记
  10. 让你真正了解Java(纯干货)
  11. 18.16 gcc-3.4.5编译错误及解决方法集锦
  12. mysql表关联
  13. Liunx系统命令sed的使用
  14. webpack打包多个入口文件
  15. WAS 默认端口列表
  16. Centos7源码安装httpd2.4版本web服务器
  17. CentOS IPv6设置
  18. 彻底解决springMVC中文乱码
  19. java对象创建过程简介
  20. TextFlow with JavaFX 2

热门文章

  1. hdu 4740 The Donkey of Gui Zhou bfs
  2. 手把手教你使用 Imagepro plus - 宏操作【转】
  3. 使用foreach碰到的问题
  4. Flex中NetConnection与NetStream的关系、及浏览器并发连接数测试[转]
  5. HDU 4876 ZCC loves cards(暴力剪枝)
  6. iOS开发——开发必备OC篇&amp;UITableView设置界面完整封装(二)
  7. Trace、Debug和TraceSource的使用以及日志设计 .
  8. 解析Qt中QThread使用方法
  9. PHP抓取网络数据的6种常见方法
  10. Linux下的lds链接脚本基础