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

我已经在这个问题上纠缠了好几天了，但我似乎不明白为什么

元素会自动结束。下面是创建它的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>';

nextStep.innerHTML=''+方向+''；
对于（i=0；i'；
}
nextStep.innerHTML=nextStep.innerHTML+''；

它会生成此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>

请登录




返回

---

标签在同一行结束，而不是在

所在的位置。我希望它从哪里开始，在后退按钮前结束。如果您需要更多的JS，请告诉我。

不要设置concatenate

innerHTML

，当您编写

innerHTML=“Something”

时，它将假定HTML是完成的版本，并尝试对其进行修补

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}`;

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