Javascript - 將HTML追加到沒有innerHTML的容器元素

我需要一種將HTML附加到容器元素而不使用innerHTML的方式。爲什麼我不希望使用innerHTML的原因是因爲當它用這樣的：Javascript - 將HTML追加到沒有innerHTML的容器元素

element.innerHTML += htmldata

它通過替換所有的HTML首先將舊的HTML加上新的HTML之前。這不是一件好事，因爲它重置動態媒體，例如嵌入式閃存視頻...

我能做到這樣，它的工作原理：

var e = document.createElement('span'); 
e.innerHTML = htmldata; 
element.appendChild(e);

然而，隨着這樣的問題是，有額外的跨度在我不想要的文檔中添加標籤。

這怎麼做呢？謝謝！

來源

2011-06-10 Bob

舉一個替代（如使用DocumentFragment似乎不工作）：您可以通過循環新生成的節點的孩子模仿它，只有那些追加。

var e = document.createElement('div'); 
e.innerHTML = htmldata; 

while(e.firstChild) { 
    element.appendChild(e.firstChild); 
}

來源

2011-06-10 10:10:57

這就是DocumentFragment的意思。

var frag = document.createDocumentFragment(); 
var span = document.createElement("span"); 
span.innerHTML = htmldata; 
for (var i = 0, ii = span.childNodes.length; i < ii; i++) { 
    frag.appendChild(span.childNodes[i]); 
} 
element.appendChild(frag);

document.createDocumentFragment，.childNodes

來源

2011-06-10 09:32:24 Raynos

我剛測試過這個，它不起作用。那是應該如何使用的？ – Bob 2011-06-10 09:43:17

你從哪裏得到（a）'？這是一個錯字。 – 2011-06-10 09:43:51

是的，這是一個錯字，它應該是e。我不認爲你可以使用innerHTML作爲片段。這是行不通的 – Bob 2011-06-10 09:44:46

326

我很驚訝沒有一個答案提到了insertAdjacentHTML()方法。檢查出來here。第一個參數是你想要追加字符串的位置（「beforebegin」，「afterbegin」，「beforeend」，「afterend」）。在OP的情況下，你會使用「beforeend」。第二個參數就是html字符串。

基本用法：

var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

來源

2012-03-24 11:51:22 alnafie

+29

剛剛嘗試過你的解決方案以及接受。兩者都可以工作，但你的只有2行，沒有循環。聽起來像是贏家。 – Corwin01 2012-05-08 23:45:25

僅供參考任何可能選擇此路線的人：此方法在IE9中無法與表格一起玩。 – Corwin01 2012-05-17 15:49:18

在Chrome中它告訴我'未捕獲的類型錯誤：未定義不是函數'！ – Ciwan 2014-11-20 12:54:16

<div id="Result"> 
</div> 

<script> 
for(var i=0; i<=10; i++){ 
var data = "<b>vijay</b>"; 
document.getElementById('Result').innerHTML += data; 
} 
</script>

分配數據，以便與「+ =」符號可以追加數據，包括以前的HTML數據

來源

2015-06-09 08:06:10 vijay

這個問題明確地要求* not *使用'element.innerHTML + = data'。 – musicnothing 2015-06-18 22:47:16

-4

element.innerHTML *+=* htmldata格 - 沒了

嘗試 - element.innerHTML **=+** htmldata如果你不想取代任何東西 - 它只是添加新的數據。

來源

2017-01-19 00:36:01 webmasternewbie

添加一些解釋，回答這個答案如何幫助OP在修復當前問題 – 2017-01-19 00:54:32

並且還要注意，問題的標題和內容陳述了OP希望_「將HTML附加到容器元素**，不帶** innerHTML」_。 – Bryan 2017-01-19 01:02:04

嗨，大家好：「爲什麼我不希望使用innerHTML的原因是因爲當它用這樣的： element.innerHTML + = htmldata 它的工作原理 - >替換< - 所有的HTML的：首先將前舊的html加上新的html。「這不是一個解決方案嗎？ – webmasternewbie 2017-01-25 23:14:32

alnafie對這個問題有很好的答案。我想給他的代碼示例，以供參考：

var childNumber = 3; 
 

 
function addChild() { 
 
    var parent = document.getElementById('i-want-more-children'); 
 
    var newChild = '<p>Child ' + childNumber + '</p>'; 
 
    parent.insertAdjacentHTML('beforeend', newChild); 
 
    childNumber++; 
 
}

body { 
 
    text-align: center; 
 
} 
 
button { 
 
    background: rgba(7, 99, 53, .1); 
 
    border: 3px solid rgba(7, 99, 53, 1); 
 
    border-radius: 5px; 
 
    color: rgba(7, 99, 53, 1); 
 
    cursor: pointer; 
 
    line-height: 40px; 
 
    font-size: 30px; 
 
    outline: none; 
 
    padding: 0 20px; 
 
    transition: all .3s; 
 
} 
 
button:hover { 
 
    background: rgba(7, 99, 53, 1); 
 
    color: rgba(255,255,255,1); 
 
} 
 
p { 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
}

<button type="button" onclick="addChild()">Append Child</button> 
 
<div id="i-want-more-children"> 
 
    <p>Child 1</p> 
 
    <p>Child 2</p> 
 
</div>

希望這是幫助他人。

來源

2017-02-02 19:52:05

Javascript - 將HTML追加到沒有innerHTML的容器元素

回答

相關問題