iT邦幫忙

0

網頁中插入JS語法

阿輪 2017-11-03 09:55:1711913 瀏覽

請問一下,我想在網頁當中插入JS語法,翻了一下資料有這2種方式,
都可以成功運作,我想知道的是,這2種語法有什麼差別呢?
哪個比較沒有多餘的語法,因為本身還看不懂太複雜的語法...謝謝!

var headElement = document.getElementsByTagName("head")[0];
var jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'x.js';
headElement.appendChild(jsElement);

var element=document.createElement('script');
element.setAttribute('src', 'x.js');
document.body.appendChild(element);

看更多先前的討論...收起先前的討論...
小魚 iT邦大師 1 級 ‧ 2017-11-03 12:32:35 檢舉
看起來一個放在head, 一個放在body, 其他應該沒什麼差吧
不過Google都建議放在</html>後面....
小魚 iT邦大師 1 級 ‧ 2017-11-06 12:36:32 檢舉
這沒有一定吧, 有的東西一定要放前面,
有的東西一定要放後面,
有的東西前面後面都可以...
fillano iT邦超人 1 級 ‧ 2017-11-07 16:54:48 檢舉
做前端最佳化時,會建議靜態的js放在所有會顯示在瀏覽器上的html內容的最後,我通常就放在body結束之前。

但是像這樣動態加進來的js,就跟這規則沒什麼關係了,要插在哪裡的影響應該不大。不過script元素的重點是要給javascript引擎執行,只要不妨礙到讀取程式碼,即使appendChild之後立刻removeChiild把他移除也沒影響。
阿輪 iT邦新手 4 級 ‧ 2017-11-07 17:20:55 檢舉
感謝回覆,理解了,謝謝~
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

7
石頭
iT邦高手 1 級 ‧ 2017-11-03 12:40:07
最佳解答

第一個
頁面中取得<head></head> head標籤 付值給物件名稱 = jsElement
var headElement = document.getElementsByTagName("head")[0];

創建一個物件<script></script> script標籤 物件名稱 = jsElement
var jsElement = document.createElement('script');

jsElement加入屬性 type='text/javascript'
jsElement.type = 'text/javascript';
執行如:<script type="text/javascript"></script>

jsElement加入屬性 src='x.js'
jsElement.src = 'x.js';
執行如:<script type="text/javascript" src="x.js"></script>

將 jsElement添加到headElement裡面
headElement.appendChild(jsElement);
執行如:<head><script type="text/javascript" src="x.js"></script></head>

第二個
在頁面中創建一個script標籤物件
var element=document.createElement('script');

element加入屬性 src='x.js'
element.setAttribute('src', 'x.js');
執行如:<script src="x.js"></script>

頁面body標籤添加一個節點element
document.body.appendChild(element);
執行如:<body><script src="x.js"></script></body>

版主可先去看Html DOM的相關介紹

http://www.w3school.com.cn/htmldom/dom_nodes.asp

froce iT邦大師 1 級 ‧ 2017-11-03 16:40:41 檢舉

真詳盡,幫推。
要是我就叫他自己寫個html去觀察差在那。哈

0
easthing
iT邦新手 5 級 ‧ 2017-11-06 11:27:04

插入的位置不同而已,head or body

我要發表回答

立即登入回答