java增加li标签_JavaScript_js 动态添加元素(div、li、img等)及设置属性的方法，把一串 html 标签赋给一个 javasc - phpStudy..._Sashac Yuan的博客-程序员宅基地

技术标签： java增加li标签

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

把一串 html 标签赋给一个 javascript 变量，除属性的值要用转义的双引号外，某些时候字符串还很长，显得有些复杂。如果用 js 动态添加元素，就不会有那么复杂的字符串出现，代码阅读性强一点，也容易理解。

网页是由 html 标签一层层组成的，js 也可以动态添加一层层的诸如 div、li、img 这样的标签。其实，不管是什么 html 标签，js 动态创建的方法都差不多，接着就先从动态添加 div 开始。

一、js 动态添加元素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

原li

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

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等)及设置属性的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。相关阅读:

Win8系统如何将常用应用固定在搜索框最顶端？将常用应用固定在搜索框最顶端的方法

浅谈javascript 函数内部属性

ubuntu虚拟机怎么设置全屏显示？

System.Timers.Timer定时执行程序示例代码

解决Asp.net Mvc返回JsonResult中DateTime类型数据格式问题的方法

html5开发之viewport使用

.net中实现listBox左右移动

JS基于FileSystemObject创建一个指定路径的TXT文本文件

win7网络正常网页提示处于脱机状态该怎么解决？

使用盗版Win10会是怎么的感觉呢？

C++中extern "C"的用法

如何禁用WinXP的刻录功能平时根本不会用到

Java判断字符串中是否包含中文方法

JS实现CheckBox复选框全选全不选功能

本文链接：https://blog.csdn.net/weixin_31417633/article/details/114876727

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Linux--内核Uevent事件机制与 Input子系统【转】_lyuharvey的博客-程序员宅基地

阅读目录Uevent在kernel中的位置Uevent的内部逻辑解析转自:http://blog.csdn.net/lxl584685501/article/details/46379453[-]一Uevent机制Uevent在kernel中的位置Uevent的内部逻辑解析二Input子系统从应用层的角度出发看...

常用链接cg 和game_yanziguilai的博客-程序员宅基地

cg教程下载：http://cgpeers.comhttp://cgpersia.comhttp://bbs.ideasr.com/forum-328-1.htmlhttp://bbs.ideasr.com/forum-337-1.html (杂志&期刊)http://www.rr-sc.com/http://forum.gfxnews.orghttp://rut

Python Faker快速构造测试数据_Lightning-py的博客-程序员宅基地

Faker’s documentation：https://faker.readthedocs.io/en/stable/index.htmlfrom faker import Fakerfake = Faker()fake.name()print(fake.name(),fake.address(),fake.company())print()fakez = Faker(locale='zh_CN')print(fakez.name(),fakez.address(),fa.

mysql的grant权限参数汇总_慕筱技术进阶日志的博客-程序员宅基地

mysql的grant权限参数汇总很明显总共28个权限：下面是具体的权限介绍：转载的，记录一下：一．权限表mysql数据库中的3个权限表：user 、db、 host权限表的存取过程是：1)先从user表中的host、 user、 password这3个字段中判断连接的IP、用户名、密码是否存在表中，存在则通过身份验证；2)通过权限验证，进行权限分配时，按照useràdbàtables_pri...

[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated.._zq33312757的博客-程序员宅基地

[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'information_schema.PROFILING.SEQ' which is not functionally dependent on columns in GROUP BY

Python为什么会是爬虫的主流？Python和其他语言相比有什么优势之处呢？_python是主流_Golden Jet7的博客-程序员宅基地

2）强大的第三方库：Python拥有大量的第三方库，其中就包括很多用于网络爬虫的库，如BeautifulSoup、Requests、Selenium等，这些库可以帮助我们快速地进行网页爬取。这个程序使用了Python的requests库和BeautifulSoup库，requests库用于发送HTTP请求和获取HTML内容，BeautifulSoup库用于解析HTML内容。1）简单易学：Python语法简单，结构清晰，代码易读易懂，上手容易，不需要像其他语言一样深入学习编译器和内存管理。