2009-11-17 65 views
11

如何使用javascript在<div id="mydiv">...</div>之間插入一些HTML代碼?插入/刪除div標籤之間的HTML內容

例如:<div id="mydiv"><span class="prego">Something</span></div>其大約10行html。謝謝

+1

你替換在div的HTML,或插入多進單嗎? – Zoidberg 2009-11-17 17:27:17

回答

25

如果你要替換的div的內容,並有HTML作爲一個字符串,你可以使用以下命令:

document.getElementById('mydiv').innerHTML = '<span class="prego">Something</span>'; 
3
// Build it using this variable 
var content = "<span class='prego'>....content....</span>"; 
// Insert using this: 
document.getElementById('mydiv').innerHTML = content; 
2
document.getElementById("mydiv").innerHTML = "<span class='prego'>Something</span>"; 

應該這樣做。如果你願意使用jQuery,它可能會更容易。

2

document.getElementById('mydiv')。innerHTML ='whatever';

2

這真是一種模棱兩可的請求。有很多方法可以完成。

document.getElementById('mydiv').innerHTML = '<span class="prego">Something</span>'; 

這是最簡單的。要麼;

var spn = document.createElement('span'); 
spn.innerHTML = 'Something'; 
spn.className = 'prego'; 
document.getElementById('mydiv').appendChild(spn); 

首選這兩種方法是使用創建像這樣簡單的東西的快捷方式,如一個mootools的Javascript庫。 (http://mootools.net

通過MooTools這個任務看起來像:

new Element('span', {'html': 'Something','class':'prego'}).inject($('mydiv')); 
+0

在這種情況下,使用mootools並不是什麼捷徑。你只保存六個字符,並且必須理解一個新的框架。 Mootools可能適用於更復雜的功能,尤其是在每個瀏覽器的解決方案不同的情況下。 – 2013-09-04 08:36:13

12

的簡單方式與香草的JavaScript是使用appendChild做到這一點。

var mydiv = document.getElementById("mydiv"); 
var mycontent = document.createElement("p"); 
mycontent.appendChild(document.createTextNode("This is a paragraph")); 
mydiv.appendChild(mycontent); 

或者您可以使用其他人提到的innerHTML

或者,如果你想使用jQuery,上面的例子可以寫成:

$("#mydiv").append("<p>This is a paragraph</p>"); 
相關問題