創建一個腳本元素（從腳本標記）插入到頭

我有兩個腳本標記，我從一個信任的服務。它看起來像這樣後剝離CDATA：創建一個腳本元素（從腳本標記）插入到頭

<script src="http://src1"></script><script src="http://src2"></script>

我需要將這些插入頭元素。

如果我像下面這個考試一樣，它會工作。然而，這意味着我需要解析上面提到的兩個傳入腳本標記的src屬性，並創建兩個新元素並將src屬性添加到每個元素。這不是我想要做的。

const head: HTMLHeadElement = document.querySelector("head"); 
let script = document.createElement('script'); 
script.src = "https://sourcescript"; 
head.insertBefore(template, head.lastChild);

是否沒有辦法直接從下面的HTML製作HTMLElement？這將避免我不得不解析src屬性。

<script src="http://src1"></script><script src="http://src2"></script>

然後我會像使用insertBefore在上面的代碼中那樣將該元素插入頭部。

感謝

來源

2017-07-27 Jordan McDonald

jQuery的可以這樣做：'$（「」）'應該創建適當的節點。儘管如此，你仍然必須自己附加。 –

嘗試使用腳本的HTML附加到一個新的元素，然後遞歸的兒童和動態創建每個子元素的屬性src新的腳本元素。然後將它們附加到頭：

var e = document.createElement('div'); 
e.innerHTML = '<scr'+'ipt type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></scr'+'ipt><scr'+'ipt src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></scr'+'ipt>'; 

var script = e.firstChild, 
    scriptInserted; 

while(script) { 
    scriptInserted = document.createElement('script'); 
    scriptInserted.setAttribute('src', script.getAttribute('src')); 
    document.body.appendChild(scriptInserted); 
    script = script.nextSibling; 
} 

// Test and see if jQuery and underscore js are loaded after a second. 
setTimeout(function() { 
    console.log('jQuery', jQuery.fn.jquery); 
    console.log('_', _.VERSION); 
}, 1000);

我以前'<scr'+'ipt語法，因爲JavaScript當一個字符串包含內部<script>標籤混淆。由於您使用服務中的腳本獲取html，因此您不會遇到問題。

和控制檯輸出：

你可以在這裏查看我的工作例如：http://zikro.gr/dbg/html/append-script.html

來源

2017-07-27 18:49:59

看中謝謝。我不想循環，但找不到另一種方式。所以我使用了這種技術 –

創建一個腳本元素（從腳本標記）插入到頭

回答

相關問題