How do I take input value and append it to new element?

Question

This is what I want to do: On click of button, create a "p" element, give it an id, append it to parent div, then take the value of the input field and append that to the "innerHTML" of the newly created "p" element. Please help!

html:

<div id="main_container">
    <h1 class="hero">TITLE</h1>
    <div id="content_container">
        <form id="form">
            <label id="create_name">Create a username:</label>
            <input id="input1"></input>
            <button id="usr_btn">button</button>
        </form>
    </div>
</div>

js:

$('#usr_btn').on('click', function (e) {
    if ($('#input1').val() != null) {
        e.preventDefault();
        var userName = document.createElement('p');
        userName.id = 'name_created';
        $('#name_created').append($('#content_container'));
        $('#name_created').append($('#input1').val());
    }
});

Answer 1

I'd suggest:

//Declare the step variable
var step=0; 
$('#usr_btn').on('click', function (e) {
        if ($('#input1').val() != null) {
            e.preventDefault();
            //Increment ID's to make them unique   
             step++;
            // using jQuery to create a <p> element, with
            // an id of 'name_created', and using
            // the 'text' property to set the textContent
            // of the element:
            var userName = $('<p>', {
                'id' : 'name_created'+step,
                'text' : $('#input1').val()
            // appending the created element t '#content_container':
            }).appendTo('#content_container');
        }
    });

One problem in your own posted code is that the line:

$('#name_created').append($('#content_container'));

appends the element identified by its id of 'content_container' to the created element, whereas your question suggests you want to add the created-element to the #content_container element.

References:

• appendTo() .
• Creating an element with jQuery: jQuery(html, attributes) .

Answer 2

Something like (including validation to ensure you don't duplicate id's - which is invalid in html):

 $('#usr_btn').on('click', function(e) { if ($('#input1').val() != null) { var user = $('#input1').val(); var count = $('#' + user).length; if (count == 0) { $('#content_container').append("<p id=" + user + ">" + user + "</p>"); } else { alert("User is already there!"); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main_container"> <h1 class="hero">TITLE</h1> <div id="content_container"> <form id="form"> <label id="create_name">Create a username:</label> <input id="input1"></input> <button id="usr_btn">button</button> </form> </div> </div> 

Answer 3

The issue with your code is that the jQuery selector will not find the newly created #name_created element as it is not part of the DOM. Try this:

 $('#usr_btn').on('click', function (e) { e.preventDefault(); if ($('#input1').val() != '') { $('<p />', { id: 'name_created', text: $('#input1').val() }).appendTo('#content_container'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main_container"> <h1 class="hero">TITLE</h1> <div id="content_container"> <form id="form"> <label id="create_name">Create a username:</label> <input id="input1" /> <button id="usr_btn">button</button> </form> </div> </div> 

This code creates the new p tag, applies the values for text and id to it, then appends it to the #content_container . Note that your code may end up with duplicate id attributes if the button is pressed repeatedly. You may be better off changing the id to a class .