Question

我想在两个带有javascript的html标签（电子邮件：和密码：）之后直接添加新文本。我该怎么办？

在两个标签中紧随电子邮件：和密码：之后。

<div class="container">
        <div class="welcome-area">
            <div class="content">
                <!--<h1><strong>SOME TEXT GOES HERE</strong></h1>
                <div class="login-area">
                    <div class="app-intro">

                    </div>
                    <div class="login-div">
                        <form action="add-to-cart.html">
                            <h1>LOGIN</h1>
                            <label for="email">Email:</label>
                            <input id="email" type="email" placeholder="Email" autofocus autocomplete="">
                            <label for="password">Password:</label>
                            <input id="password" type="password" placeholder="Password">
                            <input type="submit" value="Submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

您可以尝试使用带有属性选择器的querySelector()来修改textContent属性：

document.querySelector('[for="email"]').textContent += ' email text'; // Email label
document.querySelector('[for="password"]').textContent += ' password text'; // Password label

<div class="container">
    <div class="welcome-area">
        <div class="content">
            <h1><strong>SOME TEXT GOES HERE</strong></h1>
            <div class="login-area">
                <div class="app-intro">

                </div>
                <div class="login-div">
                    <form action="add-to-cart.html">
                        <h1>LOGIN</h1>
                        <label for="email">Email:</label>
                        <input id="email" type="email" placeholder="Email" autofocus autocomplete="">
                        <label for="password">Password:</label>
                        <input id="password" type="password" placeholder="Password">
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

尝试类似的事情：

var value_to_add = "my code here"; document.getElementById("password").after(value_to_add);

Answer 3

一种方法，可能不是最好的答案，我敢肯定还有其他更有效的方法。

在两个标签中添加ID

<div class="container">
    <div class="welcome-area">
        <div class="content">
           <h1><strong>SOME TEXT GOES HERE</strong></h1>
            <div class="login-area">
                <div class="app-intro">

                </div>
                <div class="login-div">
                    <form action="add-to-cart.html">
                        <h1>LOGIN</h1>
                        <label for="email" id="lblEmail">Email:</label>
                        <input id="email" type="email" placeholder="Email" autofocus autocomplete="">
                        <label for="password" id="lblPassword">Password:</label>
                        <input id="password" type="password" placeholder="Password">
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var lblEmail = document.getElementById("lblEmail");
    var lblPass = document.getElementById("lblPassword");

    lblEmail.innerHTML += 'Some extra text here';
    lblPass.innerHTML += 'Some extra text here';
</script>

因此。验证，您可以执行以下操作

<script>
    var lblEmail = document.getElementById("lblEmail");
    var lblPass = document.getElementById("lblPassword");

    var email = document.getElementById("email").value();
    var pass = document.getElementById("password").value();

    if (email == null){
        lblEmail.innerHTML += 'This field is required';
    }else if (pass == null){
        lblPass.innerHTML += 'This field is required';
    }else{
        ...do something here
    }       
</script>

如何在标签元素内的文本旁边添加新文本

3 个答案: