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

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

本文关键字：新元素 元素 何获取 获取 输入      更新时间：2023-09-26

这就是我想要做的：点击按钮，创建一个"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());
    }
});

我建议：

//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元素中。

参考文献：

  • appendTo()
  • 使用jQuery创建元素：jQuery(html, attributes)

代码的问题是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。

类似（包括验证以确保您不会重复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>

相关文章：