Question

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

Answer 1

赢了工作。 Per the MDN docs：

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

如果您需要文字，请修改cd属性

Answer 2

您好，如果您只想添加值为“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>

希望这有帮助！

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

2 个答案: