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 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
浅谈Vue.js
Mar 02 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
js回调函数仿360开机
2019/12/26 Javascript
js实现简易ATM功能
2020/10/27 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python私有属性和方法实例分析
2015/01/15 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python开发游戏的前期准备
2019/05/05 Python
python3中布局背景颜色代码分析
2020/12/01 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
校庆标语集锦
2014/06/25 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
格林童话读书笔记
2015/06/30 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python