嫌innerHTML效能不夠好,推薦幾個新方法

2021-09-25 01:51:47 字數 2796 閱讀 4789

第一種解決方案:

使用insertadjacenthtml()方法,

這個方法接收兩個引數,乙個是where,乙個是text,

where是指插入的位置,有四個可選值,分別為:

beforebegin: 插入到標籤開始前

afterbegin:插入到標籤開始標記之後

beforeend:插入到標籤結束標記前

afterend:插入到標籤結束標記後

text即為html文字,例如「」;

關於四個位置引數的解析請看**:

先看一下html結構是這樣的:

<

ul id

="list"

>

<

li>one

li>

ul>

1、beforebegin: 插入到標籤開始前:

var list=document.getelementbyid("list");

list.insertadjacenthtml("beforebegin","two");

在瀏覽器中的檢視**是這樣的:

<

li>two

li>

<

ul>

<

li>one

li>

ul>

2、afterbegin:插入到標籤開始標記之後

var list=document.getelementbyid("list");

list.insertadjacenthtml("afterbegin","two");

在瀏覽器中是這樣的:

<

ul id

="list"

>

<

li>two

li>

<

li>one

li>

ul>

3、beforeend:插入到標籤結束標記前

var list=document.getelementbyid("list");

list.insertadjacenthtml("beforeend","two");

在瀏覽器中是這樣的:

<

ul id

="list"

>

<

li>one

li>

<

li>two

li>

ul>

4、afterend:插入到標籤結束標記後

var list=document.getelementbyid("list");

list.insertadjacenthtml("afterend","

<

li>two

li>");

在瀏覽器:

<

ul id

="list"

>

<

li>one

li>

ul>

<

li>two

li>

關於第二個引數,可以是乙個字串引數,像這樣:

var html="<

li>two

li>

";list.insertadjacenthtml("afterend",html);

方法思想:

首先建立乙個容器,這裡是div;

然後將要追加的html**新增到這個容器中;

取出這個容器中的所有節點,遍歷每乙個節點;

建立乙個文件片段,fragment=document.createdocumentfragment();

將節點複製到文件片段中,這裡使用clonenode函式執行深複製;

最後將文件片段追加到元素中。

1

function23

var div=document.createelement("div"),

4 nodes=null

,5 fragment=document.createdocumentfragment();

6 div.innerhtml=html;

7 nodes=div.childnodes;

8for(var i=0,len=nodes.length;i)

11 site=site||"before";

13//

**記憶體

14 nodes=null

;15 fragment=null

;16 }

可以這樣使用:

分別產生的效果是:(還是利用上面的html**結構)

//after

<

ul id

="list"

>

<

li>one

li>

<

li>two

li>

ul>

//before

<

ul id

="list"

>

<

li>two

li>

<

li>one

li>

ul>

為什麼你總會覺得自己的產品不夠好

引用 我們都說過這句話 我的產品還不夠好。所有剛開始做產品的人都會覺得自己的產品欠火候。就算產品推出之後,也總會覺得有種種不完美,如果只要去做 x y 或 z,產品就會變得好很多。往好的方面說,這會給產品乙個很好的改良路線圖,往壞的方面說,這會導致無休止的迭代和延期,而產品可能永遠發不出去。大約一年...

為什麼你總會覺得自己的產品不夠好

引用 我們都說過這句話 我的產品還不夠好。所有剛開始做產品的人都會覺得自己的產品欠火候。就算產品推出之後,也總會覺得有種種不完美,如果只要去做 x y 或 z,產品就會變得好很多。往好的方面說,這會給產品乙個很好的改良路線圖,往壞的方面說,這會導致無休止的迭代和延期,而產品可能永遠發不出去。大約一年...

程式設計師職場選擇 工作不夠好,該換還是繼續幹?

看完前面幾次的內容,你很可能會遇到這樣乙個情況 你掌握了一整套好職業的標準,回頭對照一下,發現自己現在這份工作,又不是自己愛幹的,又不太值得幹,而且還不能抗風險,總之就是很多地方都不完美。其實,這也是很多有上進心的人的困惑,對於他們來說,完美永遠在下一步。那麼,面對這份你不太滿意的工作,是應該現在就...