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

Question

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

例如：<div id="mydiv"><span class="prego">Something</span></div> 这个HTML代码大约有10行。谢谢。

- ant

---

你是要替换 div 中的 HTML，还是向其中插入更多内容？ - Zoidberg

Answer 1

如果你要替换

的内容，并且HTML以字符串形式存在，你可以使用以下方法：

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

- Bryan Kyle

Answer 2

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

- Zack The Human

Answer 3

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

- Doug Neiner

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

- Dustin Hansen

---

在这种情况下，使用mootools并不是一个很好的捷径。你只能节省六个字符，并且必须理解一个新的框架。Mootools可能适用于更复杂的功能，特别是当解决方案因浏览器而异时。 - Iain Samuel McLean Elder

Answer 5

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

应该这样做。如果你愿意使用jQuery，那么可能更容易。

- Vincent Ramdhanie

Answer 6

使用该代码可以通过JavaScript获取id为“mydiv”的元素，并将其内容设置为“whatever”。

- prime_number

Answer 7

Javascript

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

jQuery

$("#mydiv").append('<span class="prego">Something</span>');

- Manikandan