JavaScript生成的输入标记不显示文本_Javascript_Html_Dom

JavaScript生成的输入标记不显示文本

javascript html dom

JavaScript生成的输入标记不显示文本,javascript,html,dom,Javascript,Html,Dom,我一直在尝试用JavaScript将输入标记插入DOM。当我将输入标记的innerHTML属性设置为某个文本时，问题就出现了我注意到，在Chrome开发者工具中，JavaScript生成的输入有一个结束标记。输入标记不是一个自动关闭标记吗当我检查开发人员工具时，没有发现错误。此外，当我检查元素时，输入标记将与相关文本一起出现，但它不会出现在窗口上。你知道是什么导致了这个问题吗 //javascript function Survey() {} Survey.prototype.displa

我一直在尝试用JavaScript将输入标记插入DOM。当我将输入标记的innerHTML属性设置为某个文本时，问题就出现了

我注意到，在Chrome开发者工具中，JavaScript生成的输入有一个结束标记。输入标记不是一个自动关闭标记吗

当我检查开发人员工具时，没有发现错误。此外，当我检查元素时，输入标记将与相关文本一起出现，但它不会出现在窗口上。你知道是什么导致了这个问题吗

//javascript
function Survey() {}

Survey.prototype.displaySurvey = function() {
var form = document.createElement("form");
form.setAttribute("action", "none");
form.setAttribute("method", "get");
document.body.appendChild(form);

var input = document.createElement("input");
input.setAttribute("name", "prod");
input.setAttribute("type", "text");
input.innerHTML = "product";
form.appendChild(input);
}

window.onload = main;

function main() {
  var survey = new Survey();
  survey.displaySurvey();
}


<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<script type="text/javascript" src="survey1.js"></script>
</head>
<body>
</body>
</html>

//javascript
函数Survey（）{}
Survey.prototype.displaySurvey=函数（）{
var form=document.createElement（“表单”）；
form.setAttribute（“动作”、“无”）；
form.setAttribute（“方法”、“获取”）；
文件.正文.附件（表格）；
var输入=document.createElement（“输入”）；
输入.setAttribute（“名称”、“产品”）；
输入.setAttribute（“类型”、“文本”）；
input.innerHTML=“产品”；
表单。追加子项（输入）；
}
window.onload=main；
函数main（）{
var调查=新调查（）；
survey.displaySurvey（）；
}
形式测试

不起作用：

允许的内容无，它是空元素

如果您需要文本，请编辑

值

属性

如果您只想添加一个值为“option”的输入，请将javaScript更改为以下内容。这将在新创建的div内创建一个id为“content”的输入字段

function Survey（）{}
Survey.prototype.displaySurvey=函数（）{
var form=document.createElement（“表单”）；
form.setAttribute（“动作”、“无”）；
form.setAttribute（“方法”、“获取”）；
文件.正文.附件（表格）；
/*var输入=document.createElement（“输入”）；
输入.setAttribute（“名称”、“产品”）；
输入.setAttribute（“类型”、“文本”）；
input.innerHTML=“产品”；
表单。追加子项（输入）*/
document.getElementById（“内容”）.innerHTML=“”；
}
函数main（）{
var调查=新调查（）；
survey.displaySurvey（）；
}
//window.onload=main；
window.onload=函数（）{
main（）；
};

还有你的html

<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<script type="text/javascript" src="survey1.js"></script>
</head>
    <body>
        <div id="content">
        </div>
    </body>
</html>


形式测试

希望这有帮助

没有

innerHTML

-它们有一个

值

为什么要执行window.onload=function（）{main（）；}；而不是window.onload=main？我这样做是因为当我在本地测试它时，我不能让它只使用

window.onload=main出于某种原因。然而，如果它能以你的方式工作，那就好了window.onload=function（）{main（）；}允许您在onload事件上执行多项操作。请看，我刚刚用window.onload=main再次测试了它而且它工作得很好，哈哈。这可能是因为我测试中的一个bug。祝你好运谢谢你的帮助！别担心！如果有效的话，别忘了把它标记为正确答案。
<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<script type="text/javascript" src="survey1.js"></script>
</head>
    <body>
        <div id="content">
        </div>
    </body>
</html>