Question

我有<div id="editform"></div>。我当前有一些html。如何清除html并在其中插入完全不同的html？

我尝试了这个，但它不起作用：

document.getElementById('editform').innerHTML = "";

document.getElementById('editform').innerHTML = "<input type=\"text\" placeholder=\"Title\" id=\"title\" name=\"title\" style=\"display: 

block;\"><textarea rows=\"10\" style=\"display: block;\" id=\"textLoc\" placeholder=\"Text to test\"cols=\"50\"></textarea>";

有什么想法吗？

Answer 1

var cell = document.getElementById("cell");

if ( cell.hasChildNodes() )
{
    while ( cell.childNodes.length >= 1 )
    {
        cell.removeChild( cell.firstChild );       
    } 
}

Answer 2

我建议使用document.createNode(...)和document.appendChild(...)将div添加到div，而不是将其添加为innerHTML。改变innerHTML往往是错误的。

Answer 3

只要您从新的HTML字符串中删除（或转义）换行符，您的代码就可以正常使用。

示例： http://jsbin.com/olabo4/

所以改变这个：

document.getElementById('editform').innerHTML = "<input type=\"text\" placeholder=\"Title\" id=\"title\" name=\"title\" style=\"display: 

block;\"><textarea rows=\"10\" style=\"display: block;\" id=\"textLoc\" placeholder=\"Text to test\"cols=\"50\"></textarea>";

到此：

document.getElementById('editform').innerHTML = "<input type=\"text\" placeholder=\"Title\" id=\"title\" name=\"title\" style=\"display: block;\"><textarea rows=\"10\" style=\"display: block;\" id=\"textLoc\" placeholder=\"Text to test\"cols=\"50\"></textarea>";

或者这个：

document.getElementById('editform').innerHTML = "<input type=\"text\" placeholder=\"Title\" id=\"title\" name=\"title\" style=\"display: \
\
block;\"><textarea rows=\"10\" style=\"display: block;\" id=\"textLoc\" placeholder=\"Text to test\"cols=\"50\"></textarea>";

Answer 4

这应该有用......也许问题出在其他地方？

如果要删除所有子节点，请尝试以下操作：

function removeChildren(obj) {
  while(obj.hasChildNodes()) { obj.removeChild(obj.lastChild); }
};

这样称呼：

removeChildren(document.getElementById('editform'));

Answer 5

document.getElementById('editform').innerHTML = "";

这应该有用。

和btw，你不需要在字符串中转义“你可以在字符串里面使用”。

另外，为了让您的生活更轻松，我会推荐一些像JQuery或Mootools这样的javascript库，以便您的DOM操作更容易并且跨浏览器兼容。

如何使用javascript清除<div>的内容？</div>

5 个答案: