如何获取输入值并将其附加到新元素？

Question

这就是我想要做的：点击按钮，创建一个 "p" 元素，给它一个 id，将它附加到父 div，然后获取输入字段的值并将其附加到新创建的 "p" 元素的 "innerHTML" 中。请帮忙！

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

类似的东西（包括验证以确保您不会重复 ID - 这在 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 2

您的代码存在的问题是 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.

Answer 3

我建议：

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

将由其 'content_container' 的 id 标识的元素附加到创建的元素，而您的问题表明您希望将创建的元素添加到 #content_container 元素。

参考文献：

如何获取输入值并将其附加到新元素？

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

html

javascript

jquery

append

createelement