在div标签之间插入/删除HTML内容

Question

如何在<div id="mydiv">...</div>使用javascript 之间插入一些HTML代码？

例如:<div id="mydiv"><span class="prego">Something</span></div>大约10行html.谢谢

Answer 1

如果要替换div的内容并将HTML作为字符串,则可以使用以下内容:

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

Answer 2

使用vanilla 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>");

Answer 3

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

Answer 4

这确实是一个模棱两可的要求。有很多方法可以实现这一点。

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);

首选这两种方法是使用 Javascript 库，该库为诸如 mootools 之类的简单事物创建快捷方法。( http://mootools.net )

使用 mootools 这个任务看起来像：

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