Question

我已经坚持了好几天，但是似乎无法弄清楚<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()">&lt; Back</div>
</div>

<form>标签结束于同一行，而不是</form>所在的位置。我希望它从现在开始，然后在返回按钮之前结束。如果您需要更多的JS，请告诉我。

Answer 1

不要设置串联appsettings.Development appsettings.Production appsettings.Qa，当您编写innerHTML时，它将假定HTML是完成版本并尝试对其进行修补。

innerHTML = "Something"

现在它应该正确呈现

P.S。我将其重写为以下更漂亮的内容

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()

HTML不呈现JS中给定的标签位置

1 个答案: