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 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

三、js 動態新增元素img

<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);
　　}

   

呼叫：addElementImg("parentUl");

以上這篇js 動態新增元素(div、li、img等) 及設定屬性的方法是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多js 動態新增元素(div、li、img等)及設定屬性的方法相關文章請關注PHP中文網！