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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 动态添加元素(div、li、img等)及设置属性的方法相关的知识,希望对你有一定的参考价值。

参考技术A 把一串
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等)及设置属性的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

如何用jquery获得每个ul下最后一个li

参考技术A

用jquery获得每个ul下最后一个li可以参考下面的代码:

$(function()

$("ul").each(function()

var y = $(this).children().last();

alert(y.text());

);

);

扩展资料:

JQuery函数

$(“img”).attr(“title”, function() return this.src ); 给某个元素添加属性/值 

$(“元素名称”).html(); 获得该元素内的内容(元素,文本等) 

$(“元素名称”).html(“new stuff“); 给某元素设置内容 

$(“元素名称”).removeAttr(“属性名称”); 给某元素删除指定的属性以及该属性的值 

$(“元素名称”).removeClass(“class”); 给某元素删除指定的样式 

参考资料来源:百度百科-jQuery

以上是关于js 动态添加元素(div、li、img等)及设置属性的方法的主要内容,如果未能解决你的问题,请参考以下文章

js 动态添加元素(divliimg等)及设置属性

js中怎样动态添加一个li

js如何动态添加onclick。

火狐浏览器下用js为img元素添加点击事件

js学习进阶-元素获取及样式设置

从后端获取到的数据直接返回div,里面的img怎么设置css样式