1、新建一个txt文档，将文档修改成“index.html”的html文件。
2、将html文件用Sublime编辑器打开，完善html5标准化代码，并修改网页标题。
3、在body标签内编写一段"ul、li"的标签。
4、用浏览器打开index.html文件，可以发现默认“ul li”标签组前面有个实心小圆点。
5、只需要在ul标签内加入（style=“list-style：none；”）的样式代码，保存后再次刷新下页面。
6、刷新页面后，发现ul、li标签组前面的小圆点不见了。
注意事项：
JavaScript已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
这是使用js增加li的示例，供您参考：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>js增添li元素</title>
</head>
<body>
<ul id='ul1' onClick="add()">
<li>点击这里增加一个li行</li>
</ul>
<script>
var cnt = 1 // 用于行计数
function add() {
var elem_li = document.createElement('li') // 生成一个 li元素
elem_li.innerHTML = '这是增加的一行' + cnt ++ // 设置元素的内容
document.getElementById('ul1').appendChild(elem_li) // 添加到UL中去
}
</script>
</body>
</html>
运行结果：
把一串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等)及设置属性的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）