AppendChild 在 Ajax 请求中不起作用

Posted 2023-05-07

【中文标题】AppendChild 在 Ajax 请求中不起作用

【英文标题】：AppendChild not working in Ajax request

【发布时间】：2011-10-07 20:20:49

【问题描述】：

我有一个脚本可以在按下当前元素时添加一个输入字段元素。当我使用 innerhtml 时，它会替换当前的，这不是我想要的。所以我认为 appendChild 应该添加而不是替换，但它不起作用。这是我的脚本..

<script type="text/javascript">
function addfile()

if (window.XMLHttpRequest)
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  
else
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  
xmlhttp.onreadystatechange=function()
  
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    
    document.getElementById("org_div1").appendChild = xmlhttp.responseText;
    
  
xmlhttp.open("GET","addfile.php");
xmlhttp.send();

</script>

还有我的 html 内容..

<div id="org_div1" class="file_wrapper_input">

                        <input type="hidden" value="1" id="theValue" />
<input type="file" class="fileupload" name="file1" size=
"80" onchange="addfile()" /></div>

还有我的 addfile.php 文件..

    var i=0;
        var ni = document.getElementById('org_div1');
        var numi = document.getElementById('theValue');
        var num = (document.getElementById('theValue').value -1)+ 2;
        numi.value = num;
        var divIdName = num;
</script>
<input type="file"  class="fileupload" size="80" name="file' + (num) + '" onchange="addfile()" />;

任何输入？同样，innerHTML 可以工作，而 appendChild 不能。谢谢。

【参考方案1】：

parent.appendChild() 是一个等待 DomNode 对象的函数，而你正在传递一个字符串，它不能工作...

试试：

var d = document.createElement('div');
d.innerHtml = xmlhttp.responseText;
document.getElementById("org_div1").appendChild(d);

【讨论】：

试过了，这里的错误我得到Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLDivElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://192.168.1.42/~jak2234/new_form/ :: <TOP_LEVEL> :: line 55" data: no]

【参考方案2】：

AppendChild 需要一个对象，其中 innerHTML 与字符串一起使用。而且由于您的服务器返回部分 HTML，这仅适用于 innerHTML。

【讨论】：

@DariuszR 哦，我明白了。服务器是否可以将 addfile.php 从字符串转换为对象？

但它会清除父级中所有现有的html

您将需要一个 JavaScript 对象，只能在浏览器（而不是服务器）中构建它。所以您可以将您的 html 转换为 JSON，但您仍然需要在客户端站点上创建 DIV、INPUT 和其他对象。是的 - 它将取代现有的 html...

@DariuszR @ChristopheCVB 我创建了一个后续问题.. ***.com/questions/6736528/…