JavaScript 生成的输入标签不显示文本答案

【问题标题】：JavaScript generated input tag not displaying textJavaScript 生成的输入标签不显示文本
【发布时间】：2018-03-23 19:02:00
【问题描述】：

我一直在尝试使用 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>

【问题讨论】：

<input> 没有 innerHTML - 他们有 value

标签： javascript html dom

【解决方案1】：

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

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);*/
   document.getElementById("content").innerHTML ="<input type='text' name='prod' value='product' />";
}

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

//window.onload = main;
window.onload = function(){
    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>

希望这会有所帮助！

【讨论】：

你为什么要做 window.onload = function() { main(); };而不是 window.onload = main; ?
我这样做是因为当我在本地测试它时，由于某种原因，我无法让它与 window.onload = main; 一起工作。但是，如果它可以按照您的方式进行，那很好。 window.onload = function() { main(); }; 允许您对 onload 事件执行多项操作。见here
我刚刚用window.onload = main; 再次对其进行了测试，它运行良好，哈哈。这可能只是由于我的测试中的一个错误。祝你好运！
感谢您的帮助！
别担心！如果有效，请不要忘记将其标记为正确答案。

【解决方案2】：

行不通。 Per the MDN docs:

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

如果您需要其中的文本，请编辑 value 属性

【讨论】：