append 加載 pen body 指定 結合 eat 移動 ext

動態創建元素的三種方式；

一、document.write()；

功能：向body的最後添加一段結構；

參數：字符串；

用法：document.write(‘這是內容<div>這是div</div>‘)；

問題：

1、如果頁面加載後使用會導致頁面所有內容被覆蓋；

2、無法進行指定位置添加元素；

二、box.innerHTML = ‘要添加的元素‘;

優點

1、可以指定位置添加元素；

2、創建復雜結構非常方便；換行的話需要進行基本的字符串處理使用轉譯符；

box.innerHTML = ‘<div><p class="text colorRed"></p></div>\

　　　　　　<div><p class="text fl"></p><span><a href="#">這是a標簽</a></span></div>\ 　　　　　　 <div><p class="text fl"></p><h4>這是h4</h4></div>\ 　　　　　　<div><p class="text fl"></p><span><a href="#">這是a標簽</a><h4>這是h4</h4></span></div>\ 　　　　　　<div><p class="text colorRed"><span><a href="#">這是a標簽</a></span></p></div>‘; 缺點； 1、會對原有的元素內部結構進行覆蓋； 解決方法是使用 += 可以貌似解決覆蓋問題，但只是長得像並不是原來的內部元素；如果被覆蓋的事件有事件，那麽事件將不復存在； 三、createElement創建元素（常用） 用法 ： createElement(‘<div></div>‘); 要結合appendChild() 或 insertBefore();使用 功能：用於創建指定標簽 參數：字符串形式的標簽名； 特點：使用此方法創建的元素默認不在頁面上顯示，需要結合元素的移動功能才可以顯示； 總結：當要創建的結構比較復雜時，用 ：innerHTML; 　　　除了結構復雜的情況外都可以使用document.createElement();

四、刪除節點

父節點.removeChild(text);

js動態創建元素和刪除