Javascript 根据输入创建具有动态ID和值的段落_Javascript_Jquery_Html_Dom_Dynamic

Javascript 根据输入创建具有动态ID和值的段落

javascript jquery html dom dynamic

Javascript 根据输入创建具有动态ID和值的段落,javascript,jquery,html,dom,dynamic,Javascript,Jquery,Html,Dom,Dynamic,我从两个输入创建了两个段落，但我无法将输入的内容放到段落中代码如下： HTML <form id="ip-form" class="custom-form wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s"> <div class="row"> <div class="col-6"> <div class="form-group"> <

我从两个输入创建了两个段落，但我无法将输入的内容放到段落中

代码如下：

HTML

<form id="ip-form" class="custom-form wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s">
  <div class="row">
    <div class="col-6">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control custom-input-form" id="name" placeholder="Name">
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="form-group">
        <div class="input-group">
          <input type="number" class="form-control my-ip" id="number" placeholder="Name">
        </div>
      </div>
      <button type="submit" class="btn btn-gray no-side-margin float-right" id="add-new">Add</button>
    </div>
  </div>
</form>

<div class="row">
  <div class="col-6" id="new-names">
  </div>
  <div class="col-6" id="new-numbers">
  </div>
</div>


添加

var countName = 0;
var countNumber = 0;

$('#add-new').on('click', function(e) {
    e.preventDefault();
    $('#new-names').append('<p id="new-name-'+countName+'"></p>');
    countName++;
    $('#new-numbers').append('<p id="new-number-'+countNumber+'"></p>');
    countNumber++;

  $('#"new-name'+countName+'"').text($('#name').val()); 
  $('#"new-number'+countNumber+'"').text($('#number').val());

});

var countName=0；
var countNumber=0；
$（'#添加新'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
$（“#新名称”）.append（“”）；
countName++；
$（“#新数字”）.append（“”）；
countNumber++；
$（“#”新名称“+countName+”）.text（$（“#名称”）.val（）；
$（“#”新数字“+countNumber+”）.text（$（“#数字”）.val（）；
});

我还使用以下代码在simple Codepen上创建了：

谢谢

尝试以下操作：

var countName = 0;
var countNumber = 0;

$('#add-new').on('click', function(e) {
    e.preventDefault();
    $('#new-names').append('<p id="new-name-' + (countName++) + '">' + $('#name').val() + '</p>');
    $('#new-numbers').append('<p id="new-number-' + (countNumber++) + '">' + $('#number').val() + '</p>');
});

var countName=0；
var countNumber=0；
$（'#添加新'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
$（“#新名称”）.append（“”+$（“#名称”）.val（）+””）；
$（“#新数字”）.append（“”+$（“#数字”）.val（）+”）；
});

尽量减少与DOM的交互。这里两个

.append

和两个

.val

调用就足够了。

尝试以下操作：

var countName = 0;
var countNumber = 0;

$('#add-new').on('click', function(e) {
    e.preventDefault();
    $('#new-names').append('<p id="new-name-' + (countName++) + '">' + $('#name').val() + '</p>');
    $('#new-numbers').append('<p id="new-number-' + (countNumber++) + '">' + $('#number').val() + '</p>');
});

var countName=0；
var countNumber=0；
$（'#添加新'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
$（“#新名称”）.append（“”+$（“#名称”）.val（）+””）；
$（“#新数字”）.append（“”+$（“#数字”）.val（）+”）；
});

尽量减少与DOM的交互。两个

.append

和两个

.val

调用在这里就足够了。

以下是我所做的：

修正了第12行和第13行的一些语法

原创的

$('#"new-name'+countName+'"').text($('#name').val()); 
$('#"new-number'+countNumber+'"').text($('#number').val());

新的

我将

'+$（'#name'）.val（）+'

添加到第7行，并将

'+$（'#number'）.val（）+'

添加到第9行的p标记之间

我还更改了数字字段的占位符文本。一切似乎都很顺利

注释

除了一些语法错误，我没有注意到任何重大问题

新代码

HTML


添加

JavaScript

var countName = 0;
var countNumber = 0;

$('#add-new').click(function(e) {

    e.preventDefault();
    $('#new-names').append('<p id="new-name-'+countName+'">'+$('#name').val()+'</p>');
    countName++;
    $('#new-numbers').append('<p id="new-number-'+countNumber+'">'+$('#number').val()+'</p>');
    countNumber++;

  $('#new-name'+countName).text($('#name').val()); 
  $('#new-number'+countNumber).text($('#number').val());

});

var countName=0；
var countNumber=0；
$（“#添加新”）。单击（函数（e）{
e、 预防默认值（）；
$（“#新名称”）.append（“”++$（“#名称”）.val（）+””；
countName++；
$（“#新数字”）.append（“”++$（“#数字”）.val（）+””；
countNumber++；
$（'#新名称'+countName）.text（$（'#名称'）.val（））；
$（“#新编号”+countNumber）.text（$（“#编号”）.val（））；
});