js 动态添加元素(div、li、img等)及设置属性的方法


Posted in Javascript onJuly 19, 2016

把一串 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");

以上这篇js 动态添加元素(div、li、img等)及设置属性的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
来自国外的页面JavaScript文件优化
Dec 08 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
node跨域请求方法小结
Aug 25 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
JS把内容动态插入到DIV的实现方法
Jul 19 #Javascript
JS动态给对象添加事件的简单方法
Jul 19 #Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 #Javascript
Bootstrap表单布局
Jul 19 #Javascript
一次$.getJSON不执行的简单记录
Jul 19 #Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 #Javascript
javascript弹出带文字信息的提示框效果
Jul 19 #Javascript
You might like
PHP安全技术之 实现php基本安全
2010/09/04 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
深入理解js promise chain
2016/05/05 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
Python 自动补全(vim)
2014/11/30 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python 面向对象部分知识点小结
2020/03/09 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
后勤部长岗位职责
2013/12/14 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
股权转让意向书
2014/04/01 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
大雁塔英文导游词
2015/02/10 职场文书
劳动仲裁调解书
2015/05/20 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
倡议书怎么写?
2019/04/11 职场文书
python数字转对应中文的方法总结
2021/08/02 Python