使用 dom Javascript 添加新创建的标签和输入文本以形成表单？
Posted
技术标签:
【中文标题】使用 dom Javascript 添加新创建的标签和输入文本以形成表单？【英文标题】：Add new created label and input-text to form using dom Javascript? 【发布时间】：2019-07-16 14:42:31 【问题描述】：我有三个字段将由用户填写。 一个用于问题，另外两个用于建议的答案。我想让用户在点击添加提议时添加第三个或尽可能多的提议。我开始编写函数，但仍然错过了
<head>
<script>
function myFunction()
var x = document.createElement("LABEL");
var t = document.createTextNode("Titre");
x.appendChild(t);
</script>
</head>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button onclick="myFunction()">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
【问题讨论】：
This 可能会有所帮助 Similar，使用 jQuery 【参考方案1】：如果我的问题正确，您需要添加输入以从用户那里获得更多想要的答案。如果是这样，请参阅以下内容 -
var addButton = $('#add_button');
var wrapper = $('#more_answers');
$(addButton).click(function(e)
e.preventDefault();
var lastID = $("#myForm input[type=text]:last").attr("id");
var nextId = parseInt(lastID.replace( /^\D+/g, '')) + 1;
$(wrapper).append(`<div><input type="checkbox" name="ans$nextId" id="ans$nextId" values="" /> <input type="text" name="ans$nextId" id="ans$nextId" value=""/><a href="#" class="delete">Delete</a><div>`);
);
$(wrapper).on("click", ".delete", function(e)
e.preventDefault();
$(this).parent('div').remove();
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<div id="more_answers"></div>
<br>
<button id="add_button">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>【讨论】：
太棒了@Tushar，就是这样！我运行了 sn-p，它显示了预期的结果。但是我要把你写的第一个代码块放在我自己的页面中，以便在用户单击按钮时被调用。 （考虑到我是 javascript 新手） 您可以将其添加到相关 html 中可访问的 js 文件中，也可以添加到 HTML 中的<script type="text/javascript"></script> 标记中【参考方案2】：
在您的函数中，您还必须在其父级中附加您的标签。如下 -
function myFunction()
var form = document.getElementById("myForm");
var input = document.createElement("input");
form.appendChild(input)
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button type="button" onclick="myFunction()">Add proposition</button> <br><br>
<input type="submit" value="submit">
</form>如果你想把你的元素放在任何特定的地方，你应该在你的表单元素中创建一个包装器，就像下面一样 -
function myFunction()
let wrapper = document.getElementById("dynamic-fields");
var input = document.createElement("input");
wrapper.appendChild(input)
<form>
<!-- ...input fields... -->
<div id="dynamic-fields"></div> <br>
<!-- ...buttons.... -->
<button type="button" onclick="myFunction()">Add proposition</button>
</form>这样，它会将这些动态生成的元素放在表单页面的特定位置。
试试这个 - https://jsitor.com/IO08f-WBx
【讨论】：
嗯，添加了标签。输入 type="text" 呢？我也问过它，它会有另一种附加方式 为您更新了 sn-p。检查第一个示例。 不错，还有包装？以上是关于使用 dom Javascript 添加新创建的标签和输入文本以形成表单？的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript-Runoob-JS HTML DOM ：DOM 元素