Dynamically adding text input fields

Question

I'm new to Javascript and Jquery and trying to learn how to dinamically add elemnts to my html.

My HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Academic Calculator</title>
    <meta name="Calculator" content="Academic Calculator">
    <link rel="stylesheet" href="Calculate.css">

</head>
<body>
    <script src="CalculatorLogics.js"></script>
    <div>
        <form>
                First Name:<br>
                <input name="first-name">
                <br>
                Last Name:<br>
                <input name="last-name">
                <br>
            <hr>
        </form>
    </div>
    <div class="courses">
        <button type="button" onclick="createNewCourses()">Add Course</button>
    </div>
</body>
</html>

and my Javascript:

function createNewCourses() {
    $(".courses").append("<input type='text>");
}

I know there was an edit approved, but it invalidates the answers by fixing the problem. As such, I've filled it back. — jhpratt
– jhpratt, Commented Apr 29, 2018 at 15:20

mscdeveloper · Accepted Answer · 2018-04-29 13:23:07Z

2

You have made a mistake 'text replace with "text"

function createNewCourses() {
    $('.courses').append('<input type="text">');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


   <div>
        <form>
                First Name:<br>
                <input name="first-name">
                <br>
                Last Name:<br>
                <input name="last-name">
                <br>
            <hr>
        </form>
    </div>

    <div class="courses">
        <button type="button" onclick="createNewCourses()">Add Course</button>
    </div>

answered Apr 29, 2018 at 13:23

mscdeveloper

2,9291 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically adding text input fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related