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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
Javascript实现计算个人所得税
May 10 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
使用jquery如何获取时间
Oct 13 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 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
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
js定时器实例分享
2016/12/20 Javascript
HTML的select控件美化
2017/03/27 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
python实现自动更换ip的方法
2015/05/05 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Android面试题附答案
2014/12/08 面试题
护理专业个人求职简历的自我评价
2013/10/13 职场文书
财务管理专业推荐信
2013/11/19 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
英语通知范文
2015/04/22 职场文书
同意落户证明
2015/06/19 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
nginx日志格式分析和修改
2022/04/28 Servers