[]firefox 中执行 innerHTML 很怪的问题

建议你采用appendChild方法实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
<html xmlns= "http://www.w3.org/1999/xhtml "> 
<head> 
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312" /> 
<title> 无标题文档 </title> <script type= "text/javascript"> function add() 
{ 
div1 = document.createElement("div")
input1 = document.createElement("INPUT")
input1.style.borderWidth="2px"
input1.style.borderStyle="solid"
input1.style.borderColor="#000000"
div1.appendChild(input1)
document.getElementById( "texts").appendChild(div1)
} </script> </head> 
<body> <div id= "texts"> 
</div> <input type= "button" value= "add" onclick= "add();"/> </body> 
</html> 

解决方案 »

  1.   

    除了用appendChild，标准中有没有类似IE可以用到的。insertAdjacentHTML("beforeEnd",xxxx)这种的用法？
      

  2.   

    informLists.innerHTML = 
    '<div class="table" id="informTables[' + index + ']">' +
    '<input type="hidden" value=""/>' +
    '<input type="text" name="v"/>' +
    '<input type="text" name="v"/>' +
    '<div id="informPanels[' + index + '">' +
      '<span>' +
    '<input name="edit" type="button" value="编辑" class="button"/>' +
    '<input name="delete" type="button" value="删除" class="button"/>' +
    '</span>' +
    '<span>' +
    '<input name="submit" type="button" value="提交" class="button""/>' +
    '<input name="reset" type="button" value="重置" class="button"/>' +
    '<input name="cancel" type="button" value="取消" class="button"/>' +
    '</span>' +
    '<span class="button">loading...</span>' +
        '</div>' +
      '</div>';谢谢，那如果是这样的代码呢？而且这只是初步设计，以后还要改动  不可能appendChild吧。。请问楼上insertAdjacentHTML可以用的吗？怎么用？ 这样吗？var str = xxxx;informLists.insertAdjacentHTML("beforeEnd ",str）;      orinsertAdjacentHTML(str, informLists);
      

  3.   

    appendChild应该是一种很标准的写法吧。insertAdjacentHTML我试过在firefox是用不了的，估计只是IE支持。insertAdjacentHTML的用法是document.getElementById('xxxx').insertAdjacentHTML(str1,str2)其中str1是参数，有4种，beforeBegin,afterBegin,beforeEnd,afterEnd，根据字面就可以知道是什么作用了。而str2就是你要插入的参数。但由于不能兼容firefox，所以我觉得还是appendChild好。另外，楼主尽量不要用xxx.innerHTML+=str这种写法，因为如果用到循环或者str字符很多的时候，就会发现慢死。
      

  4.   

    自己实现了firefox中的innerHTML方法，问题解决:
    function HTML(root)
    {
    this.pos = 0;
    this.text;
    this.root = root;

    this.it = function()
    {
    return this.text.charAt(this.pos);
    }

    this.getText = function()
    {
    for(var txt=""; this.it()!="<"; this.pos++)
    txt += this.it();
    return txt;
    }

    this.readElement = function()
    {
    this.pos ++;
    for(var tag=""; this.it()!=" " && this.it()!=">" && this.it()!="/"; this.pos++)
    tag += this.it();
    var ele = document.createElement(tag);

    if(this.it() == " ")
    {
    while(this.it() != ">" && this.it() != "/")
    {
    this.pos ++;
    var attr;
    for(attr=""; this.it()!="=" && this.it()!=" " && this.it()!="/"
    && this.it()!=">"; this.pos++)
    attr += this.it();
    if(attr == "disabled")
    ele.disabled = true;
    else if(this.it() == "=")
    {
    var value;
    this.pos += 2;
    for(value=""; this.it()!="\""; this.pos++)
    value += this.it();

    ele.setAttribute(attr, value);
    this.pos ++;
    }
    }
    }

    if(this.it() == ">")
    {
    this.pos ++;
    var inner = new HTML(ele);
    inner.text = this.text;
    inner.pos = this.pos;
    this.pos = inner.append();
    }
    else if(this.it() == "/")
    this.pos += 2;
    return ele;
    }

    this.append = function()
    {
    while(this.pos < this.text.length)
    {
    if(this.it() == "<")
    {
    if(this.text.charAt(this.pos+1) == "/")
    {
    while(this.it()!=">")
    this.pos ++;
    this.pos ++;
    return this.pos;
    }

    var ele = this.readElement();
    this.root.appendChild(ele);
    }
    else
    {
    var txt = this.getText();
    this.root.appendChild(document.createTextNode(txt));
    }
    }
    return this.pos;
    }

    }
    然后比如之前那个加入文本框的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
    <title>无标题文档</title><script type="text/javascript" src="b.js">
    </script><script type="text/javascript">function add()
    {
    var text = document.createDocumentFragment();
    var inner = new HTML(text);
    inner.text =  '<div>' +
    '<input type="text" style="border:2px solid;"/>' +
    '</div>';
    inner.append();

    document.getElementById("texts").appendChild(text);
    }
    </script></head>
    <body> <div id="texts">
    </div> <input type= "button" value="add" onclick="add();"/>

    </body>
    </html> 
    就OK了