HTML不呈现JS中给定的标记位置
HTML不呈现JS中给定的标记位置
提问于 2018-08-11 06:55:34
我已经被这个问题困扰了好几天了，但是我似乎不明白为什么<form>元素会自动结束。下面是创建它的JS
nextStep.innerHTML = '<div class="directions">' + directions + '</div><form action="php/login.php" method="post">';
for (i = 0; i < data.length; i++) {
if (data[i].toLowerCase() != 'password') {
nextStep.innerHTML = nextStep.innerHTML + '<input name="' + data[i].toLowerCase() + '" class="input" placeholder="' + data[i] + '" autocomplete="off">';
} else {
nextStep.innerHTML = nextStep.innerHTML + '<input name="' + data[i].toLowerCase() + '" class="input" type="password" placeholder="' + data[i] + '" autocomplete="off">';
}
nextStep.innerHTML = nextStep.innerHTML + '<br>';
}
nextStep.innerHTML = nextStep.innerHTML + '<input class="login" type="submit" value="Login"></form>';它的结果是这个HTML
<div id="currentStep" class="step">
<form action="php/login.php" method="post"></form>
<div class="directions">Please Login</div>
<input name="email" class="input" placeholder="Email" autocomplete="off">
<br>
<input name="password" class="input" type="password" placeholder="Password" autocomplete="off">
<br>
<input class="login" type="submit" value="Login">
<div class="back" onclick="back()">< Back</div>
</div><form>标记在同一行结束，而不是在</form>所在的位置。我希望它从原处开始，并在后退按钮之前结束。如果你需要更多的JS，请告诉我。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-11 07:01:40
不要设置concatenate，当你编写innerHTML = "Something"时，它会假定innerHTML是完成的版本，并试图对其进行修补。
let nextStepHTML = "";
nextStepHTML = '<div class="directions">' + directions + '</div><form action="php/login.php" method="post">';
for (i = 0; i < data.length; i++) {
if (data[i].toLowerCase() != 'password') {
nextStepHTML = nextStepHTML + '<input name="' + data[i].toLowerCase() + '" class="input" placeholder="' + data[i] + '" autocomplete="off">';
} else {
nextStepHTML = nextStepHTML + '<input name="' + data[i].toLowerCase() + '" class="input" type="password" placeholder="' + data[i] + '" autocomplete="off">';
}
nextStepHTML = nextStepHTML + '<br>';
}
nextStepHTML = nextStepHTML + '<input class="login" type="submit" value="Login"></form>';
nextStep.innerHTML = nextStepHTML;现在，它应该可以正确呈现了
const nextStepStart = `<div class="directions">${directions}</div><form action="php/login.php" method="post">`;
const nextStepMiddle = data.map(current => {
const passwordString = current.toLowerCase() === 'password' ? `type="password"` : ``;
return `<input name="${current.toLowerCase()}" class="input" ${passwordString} placeholder="${current}" autocomplete="off">`;
}).join(`<br>`);
const nextStepEnd = `<input class="login" type="submit" value="Login"></form>`
nextStep.innerHTML = `${nextStepStart}${nextStepMiddle}${nextStepEnd}`;我们也可以使用Element.appendChild()和负代码来实现
从最后的第一个开始
const createInput = name => {
const stepInput = document.createElement(`input`);
const isPassword = name.lowerCase() === `password`;
stepInput.name = name.toLowerCase();
stepInput.className = `input`;
stepInput.placeholder = name;
stepInput.autocomplete = `off`;
if(isPassword){
stepInput.type = `password`;
}
return stepInput;
}
const submitButton = () => {
const submitButton = document.createElement(`input`);
submitButton.className = `login`;
submitButton.type= `submit`;
submitButton.value= `Login`;
return submitButton;
}
const createForm = (dataList) => {
const form = document.createElement(`form`);
form.action = `php/login.php`;
form.method = `post`;
const fragment = new DocumentFragment();
dataList.forEach(data => {
fragment.appendChild(createInput(data));
fragment.appendChild(document.createElement(`br`));
}
fragment.appendChild(submitButton());
form.appendChild(fragment);
return form;
}
const directions = document.createElement(`div`);
directions.className = `directions`;
directions.appendChild(createForm(data));
nextStep.appendChild(directions);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51794933
复制相关文章
相似问题