时间戳

首页 > 解决方案 > HTML 不呈现 JS 中给出的标签位置

javascript - HTML 不呈现 JS 中给出的标签位置

问题描述

我已经坚持了好几天了，但我似乎无法弄清楚为什么该<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，请告诉我。

标签： javascripthtmltagsrendering

解决方案

不要设置 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;

现在它应该正确渲染

PS我会把它改写成下面更漂亮的东西

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

推荐阅读