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

【问题标题】：How do I take input value and append it to new element?如何获取输入值并将其附加到新元素？
【发布时间】：2015-04-10 18:41:48
【问题描述】：

这就是我想要做的：点击按钮，创建一个“p”元素，给它一个id，将它附加到父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>

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());
    }
});

【问题讨论】：

我可以看到一些很好的答案，但您要添加的一件事是创建独特的 id 以确保 id 不会被重复或有一些东西可以阻止用户免于多次提交相同的用户名。这可能会在以后引起问题，具体取决于您需要 id 的用途。
我将不得不研究如何做到这一点，感谢您的提醒。
这样做的一种方法是使用值为 0 的变量，每次函数触发 +1 到您的变量并将其放在 ID 中，例如 var step=0; 在您的函数内部将step++; 放置为id 属性有"some_name"+step

标签： javascript jquery html append createelement

【解决方案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 of 'content_container' 标识的元素附加到已创建元素，而您的问题建议您要将已创建元素添加到#content_container 元素。

参考资料：

【讨论】：

好的，这解决了它，感谢关于 append() 与 appendTo() 的提示，我弄糊涂了。
不客气，我很高兴能帮上忙；对于我们这些以英语为主要（或唯一）语言的人来说，让它们保持直截了当可能更容易；但是如果一个 jQuery 方法似乎没有做它应该做的事情，它总是值得重新审视文档（它确实似乎拥有我使用过的任何库或语言中最好的 API 文档，尽管这是有限的）。
@DavidThomas 我希望你不介意，但我真的很喜欢这个答案，但我想添加唯一 ID，因为 ID 不应该多次使用。这确实回答了带有/不带有 id 重复的问题，但是我在发布新答案时没有看到太多意义，然后您就可以在这里找到它。

【解决方案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。

【讨论】：

我收到Uncaught SyntaxError: Unexpected token =
@MarkusHallcyon 我的错，错字。更新答案

【解决方案3】：

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

【讨论】：