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

Question

我想直接在两个html标签(电子邮件：和密码：(之后添加一个新文本使用JavaScript。我该怎么做？

紧跟在电子邮件：和密码：在两个标签内。

<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() with 属性选择器来修改 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>