把一串 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中文網！
