How to add new text adjacent to text inside label element

Question

I want to add a new text directly after the two html labels(Email: and Password:) with javascript. How do I go about it?

Just directly after Email: and Password: inside the two labels.

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

What Javascript have you tried? Please post the effort you have made so we can take a look and better help you. — Peter, Feb 12 '19 at 14:02
You can use [appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) — Oram, Feb 12 '19 at 14:03
Possible duplicate of [How to insert an element after another element in JavaScript without using a library?](https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib) — Oram, Feb 12 '19 at 14:06

score 1 · Accepted Answer · answered Feb 13 '19 at 04:43

You can try with querySelector() with attribute selector to modify the textContent property:

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>

thanks. I needed to know how to select label element particularly. — camelCase, Feb 16 '19 at 12:52

score 0 · Answer 2 · answered Feb 12 '19 at 14:07

0

Try something like that :

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

answered Feb 12 '19 at 14:07

Ice Ax

152
1
10

score 0 · Answer 3 · answered Feb 12 '19 at 14:22

One way of doing it, probably not the best answer, I'm sure there are other more efficient methods.

Add ID's to the two labels

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

So for ex. validation you can do something like this

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

cool stuff but I didn't want to add the IDs for the sake of selection alone. — camelCase, Feb 16 '19 at 12:53

How to add new text adjacent to text inside label element

3 Answers3