三種建立元素方式的區別

>點選

button

>

<

p>abc

p>

<

div

class

="inner"

>

div>

<

div

class

="create"

>

div>

<

script

>

= function()

//三種建立元素方式區別

//1. document.write() 建立元素 如果頁面文件流載入完畢，再呼叫這句話會導致頁面重繪

//var btn = document.queryselector('button');

= function()

//2. innerhtml 建立元素

varinner

=document.queryselector(

'.inner');

//for (var i = 0; i <= 100; i++)

vararr =;

for(

vari =0

; i

<=

100; i

++)

inner.innerhtml

=arr.join(

'');

//3. document.createelement() 建立元素

varcreate

=document.queryselector(

'.create');

for(

vari =0

; i

<=

100; i

++)

script

>

body

>

html

>

innerhtml拼接效率測試:

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>效率測試
title
>
head
>
<
body
>
body
>
<
script
>
function
fn() 
vard2 =+
newdate();
console.log(d2 
-d1);
}fn();
script
>
html
>

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>效率測試
title
>
head
>
<
body
>
body
>
<
script
>
function
fn() 
document.body.innerhtml 
=array.join(
'');
vard2 =+
newdate();
console.log(d2 
-d1);
}fn();
script
>
html
>

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>效率測試
title
>
head
>
<
body
>
body
>
<
script
>
function
fn() 
vard2 =+
newdate();
console.log(d2 
-d1);
}fn();
script
>
html
>

JS建立元素的三種方式

1.innerhtml element.innerhtml 標籤字串 2.docuement.write document.write 標籤字串 3.document.createelement document.createelement 標籤名 三者區別 innerhtml 會覆蓋原來元素裡面的...

三種動態建立元素的區別

docment.write 是直接將內容寫入頁面的內容流，但是文件流執行完畢，則它會導致頁面全部重繪 innerhtml是將內容寫入某個dom節點，不會導致頁面全部重繪 innerhtml建立多個元素效率更高 不要拼接字串採取陣列形式拼接 結構稍微複雜 createelement 建立多個元素效率稍...

DOM建立元素三種方式比較

1.document.write 會導致頁面重繪 2.innerhtml是將內容寫入某個dom節點，不會導致頁面重繪。3.innerhtml建立多個元素效率更高，只要不採取字串拼接，採取陣列形式拼接 結構稍微複雜。4.createelement 建立多個元素效率略低，但結構更清晰。1.documen...