JS動態新增div、li、img等元素及設定屬性(例項)
把一串 html 標籤賦給一個 javascript 變數,除屬性的值要用轉義的雙引號外,某些時候字串還很長,顯得有些複雜。如果用 js 動態新增元素,就不會有那麼複雜的字串出現,程式碼閱讀性強一點,也容易理解。
網頁是由 html 標籤一層層組成的,js 也可以動態新增一層層的諸如 div、li、img 這樣的標籤。其實,不管是什麼 html 標籤,js 動態建立的方法都差不多,接著就先從動態新增 div 開始。
一、js 動態新增元素div
<div id="parent"></div>
function addElementDiv(obj) {
var
//新增 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"><
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");