js 動態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法
把一串 html 標(biāo)簽賦給一個 javascript 變量,除屬性的值要用轉(zhuǎn)義的雙引號外,某些時候字符串還很長,顯得有些復(fù)雜。如果用 js 動態(tài)添加元素,就不會有那么復(fù)雜的字符串出現(xiàn),代碼閱讀性強一點,也容易理解。
網(wǎng)頁是由 html 標(biāo)簽一層層組成的,js 也可以動態(tài)添加一層層的諸如 div、li、img 這樣的標(biāo)簽。其實,不管是什么 html 標(biāo)簽,js 動態(tài)創(chuàng)建的方法都差不多,接著就先從動態(tài)添加 div 開始。
一、js 動態(tài)添加元素div
<div id="parent"></div> function addElementDiv(obj) { var parent = document.getElementById(obj); //添加 div var div = document.createElement("div"); //設(shè)置 div 屬性,如 id div.setAttribute("id", "newDiv"); div.innerHTML = "js 動態(tài)添加div"; parent.appendChild(div); }
調(diào)用:addElementDiv("parent");
二、js 動態(tài)添加li
<ul id="parentUl"><li>原li</li></ul> function addElementLi(obj) { var ul = document.getElementById(obj); //添加 li var li = document.createElement("li"); //設(shè)置 li 屬性,如 id li.setAttribute("id", "newli"); li.innerHTML = "js 動態(tài)添加li"; ul.appendChild(li); }
調(diào)用:addElementLi("parentUl");
三、js 動態(tài)添加元素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"); //設(shè)置 img 屬性,如 id img.setAttribute("id", "newImg"); //設(shè)置 img 圖片地址 img.src = "/images/prod.jpg"; li.appendChild(img); ul.appendChild(li); }
調(diào)用:addElementImg("parentUl");
以上這篇js 動態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- 原生JS實現(xiàn)動態(tài)添加新元素、刪除元素方法
- JavaScript實現(xiàn)動態(tài)添加、移除元素或?qū)傩缘姆椒ǚ治?/a>
- JS實現(xiàn)為動態(tài)添加的元素增加事件功能示例【基于事件委托】
- javaScript動態(tài)添加Li元素的實例
- JS動態(tài)添加元素及綁定事件造成程序重復(fù)執(zhí)行解決
- JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法示例
- 用js動態(tài)添加html元素,以及屬性的簡單實例
- JavaScript實現(xiàn)向OL列表內(nèi)動態(tài)添加LI元素的方法
- javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
- 詳解JS獲取HTML DOM元素的8種方法
- JavaScript獲取DOM元素的11種方法總結(jié)
- JS獲取動態(tài)添加元素的方法詳解
相關(guān)文章
javascript實現(xiàn)類似java中g(shù)etClass()得到對象類名的方法
這篇文章主要介紹了javascript實現(xiàn)類似java中g(shù)etClass()得到對象類名的方法,實例分析了javascript實現(xiàn)java中g(shù)etClass方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07JavaScript中數(shù)組的22種方法必學(xué)(推薦)
這篇文章主要介紹了JavaScript中數(shù)組的22種方法必學(xué)(推薦)的相關(guān)資料,需要的朋友可以參考下2016-07-07淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)
下面小編就為大家分享一篇淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)。小編覺得寫的非常不錯,需要的朋友可以過來參考一下2016-03-03如何利用JS通過身份證號獲取當(dāng)事人的生日、年齡、性別
身份證可以識別一個人的信息,下面就介紹一下如何利用js通過身份證號碼獲取當(dāng)事人的年齡和性別2016-01-01