javascript - HTML 不渲染 JS 中给出的标签位置

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> 的位置。是。我希望它从 is 的位置开始，并在后退按钮之前结束。如果您需要更多 JS 请告诉我。

Answer 1

不要设置连接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}`;

<小时/>

我们也可以使用 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);