需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html,填充问题基础代码。
2、在index.html中的<script>标签,输入js代码:$('#txt').val('添加值')$('#txt').attr('data','test')。
3、浏览器运行index.html页面,此时input元素成功被添加了值和属性。
首先,你给这个img增加一个ID属性,比如ID=“test”<img id = "test" src="/logo.jpg" \>
此时,你可以写一个js代码如下:
var oimg = document.getElementById("test")
if(oimg)
{
oimg.alt="" //你要添加的属性。
}
若不想添加ID,也可以遍历网页上所有的img,来比较src是否是某个值来确定是否是你想修改的,然后修改。
把一串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等)及设置属性的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。