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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
Vue实现多标签选择器
Nov 28 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python lxml模块安装教程
2015/06/02 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
什么是抽象
2015/12/13 面试题
幼儿园教师国培感言
2014/02/02 职场文书
企业法人代表任命书
2014/06/06 职场文书
村委会贫困证明范文
2014/09/21 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
教师群众路线心得体会
2014/11/04 职场文书
社区好人好事材料
2014/12/26 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python