`Add new text next to the existing text in a label element`

Question

`Add new text next to the existing text in a label element`

I need help adding new text directly after the Email: and Password: labels using JavaScript. How should I proceed?

The text should be placed immediately after Email: and Password: within 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>

javascript html css

Answer 1

Answer №1

To update the text content of specific elements, you can utilize the querySelector() method with attribute selectors:

document.querySelector('[for="username"]').textContent += ' username text'; // Username 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="username">Username:</label>
                        <input id="username" type="text" placeholder="Username" 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

To update the text content of specific elements, you can utilize the querySelector() method with attribute selectors:

document.querySelector('[for="username"]').textContent += ' username text'; // Username 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="username">Username:</label>
                        <input id="username" type="text" placeholder="Username" 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 3

Answer №2

Consider using this approach:

let new_value = "place your code here";
document.getElementById("password").insertAdjacentHTML('afterend', new_value);

Answer 4

Consider using this approach:

let new_value = "place your code here";
document.getElementById("password").insertAdjacentHTML('afterend', new_value);

Answer 5

Answer №3

There is one method to accomplish this task, although it may not be the most optimal solution as there could be more efficient approaches available.

Incorporate IDs into 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>

For instance, you can implement validation in this manner:

<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{
        ...perform required actions here
    }       
</script>

Answer 6

There is one method to accomplish this task, although it may not be the most optimal solution as there could be more efficient approaches available.

Incorporate IDs into 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>

For instance, you can implement validation in this manner:

<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{
        ...perform required actions here
    }       
</script>

`Add new text next to the existing text in a label element`

Answer №1

Answer №2

Answer №3

Similar questions

Establishing foreignObject coordinates in Angular

selecting multiple options, utilizing the post request technique

The slide effect in jQuery's show() function isn't being displayed as expected

Is it necessary for a container component to always be connected to Redux?

Elements resize based on their parent's and siblings' widths

What language should be used for JSON data formats?

What is the best way to retrieve the innerHTML content from several Quill instances that share the same class identifier?

The Chart.js donut chart is not displaying as expected on the HTML page when using

Issue with displaying Angular chart only resolves after resizing window following routing updates

The data provided was deemed invalid with the message, "Requested quantity is unavailable," involving NextJS and Commerce JS

The conundrum of updating HTML tags within a view using Ajax

Remove the initial x characters from a numerical value and verify if it aligns with a specified regular

Is it possible to invoke functions using href in vue.js?

Detecting repeated property values within a collection of embedded objects

The PHP sorted array loses its order when encoded into JSON and then sorted in JavaScript

Utilizing JavaScript functions within Django framework

Guide to generating a div element with its contents using JSON

Showing JSON information fetched from an AJAX request within an HTML page

Leveraging higher order components in combination with Redux containers

conceal the bootstrap navigation bar while the page is being