js 动态添加元素(div、li、img等)及设置属性
2024-10-10 20:35:39
把一串 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
最新文章
- mybatis 使用记录(二) 动态拼接查询条件
- 部署额外域控制器,Active Directory
- 【LeetCode】273. Integer to English Words
- android图片切换ImageSwichter的动画切换效果
- 移动端H5页面之iphone6的适配
- 【Android】读取sdcard卡上的全部图片而且显示,读取的过程有进度条显示
- [原创].NET 分布式架构开发实战之一 故事起源
- Android项目实战(三十六):给背景加上阴影效果
- php代码审计一些笔记
- 让你真正了解Java(纯干货)
- 18.16 gcc-3.4.5编译错误及解决方法集锦
- mysql表关联
- Liunx系统命令sed的使用
- webpack打包多个入口文件
- WAS 默认端口列表
- Centos7源码安装httpd2.4版本web服务器
- CentOS IPv6设置
- 彻底解决springMVC中文乱码
- java对象创建过程简介
- TextFlow with JavaFX 2
热门文章
- hdu 4740 The Donkey of Gui Zhou bfs
- 手把手教你使用 Imagepro plus - 宏操作【转】
- 使用foreach碰到的问题
- Flex中NetConnection与NetStream的关系、及浏览器并发连接数测试[转]
- HDU 4876 ZCC loves cards(暴力剪枝)
- iOS开发——开发必备OC篇&;UITableView设置界面完整封装(二)
- Trace、Debug和TraceSource的使用以及日志设计 .
- 解析Qt中QThread使用方法
- PHP抓取网络数据的6种常见方法
- Linux下的lds链接脚本基础