Question

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

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

我建议：

//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的＆＃39; content_container＆＃39;标识的元素。对于创建的元素，而您的问题建议您要将created元素添加到#content_container元素。

参考文献：

Answer 2

类似的内容（包括验证以确保您不会重复ID < - 这在html中无效）：

＆＃13;

$('#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!");
    }


  }
});

＆＃13;

<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>

＆＃13;

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。

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

3 个答案: