Как принять входное значение и добавить его в новый элемент?

Question

Это то, что я хочу сделать: щелкнув по кнопке, создайте элемент «p», дайте ему идентификатор, добавьте его в родительский div, затем возьмите значение поля ввода и добавьте его к «innerHTML» вновь созданный элемент «p». Пожалуйста помоги!

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> 

ЯШ:

$('#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

Я хотел бы предложить:

//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'); 
     } 
    }); 

Одна из проблем в собственном публикуемую кода является то, что линии:

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

добавляет элемент, идентифицированный его id из «content_container» к созданному элементу , в то время как ваш вопрос предполагает, что вы хотите добавить созданный элемент в элемент #content_container.

Ссылки:

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

Answer 2

Нечто подобное (в том числе проверку, чтобы убедиться, что вы не дублировать идентификаторы - что недопустимо в 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

Проблема с вашим кодом заключается в том, что селектор jQuery не найдет вновь созданный элемент #name_created, поскольку он не является частью DOM. Попробуйте это:

$('#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>

Этот код создает новый p тег применяет значения для text и id к нему, затем присоединяет его к #content_container. Обратите внимание, что при повторном нажатии кнопки ваш код может содержать дубликаты атрибутов id. Возможно, вам лучше сменить id на class.