jQuery: установить атрибут данных для элемента перед его добавлением

Question

При нажатии кнопки я хочу скопировать html из input и добавить его к родительскому div, но перед добавлением я хочу изменить его атрибут data-id.

Следующий код копирует и правильно добавляет поле, как я могу установить значение атрибута data-id для отметки времени?

$('button').on('click', function(event){
    
  var timestamp = Date.now(); //set this as data attribute

  var input = $(this).parent().find('input').prop('outerHTML');
  $(this).parent().append(input); //set data-id to timestamp before appending  
 
});

body {
  padding: 50px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 2px;
  padding: 8px 12px;
  font-size: 15px;
  color: #fff;
  margin-bottom: 20px;
  cursor: pointer;
  margin-left: 10px;
}

.field {
  width: 290px;
  overflow: hidden;
}

input {
  width: 220px;
  padding: 10px;
  float: left;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
  <input type="text" class="input" data-id="1" /><button>+</button>
</div>

Answer 1

Лучше использовать .clone () метод:

$('button').on('click', function(event) {

  var timestamp = Date.now(); //set this as data attribute
  
  var parent = $(this).parent();
  
  parent.find('input:first')
    .clone()
    .attr('data-id', timestamp)
    .appendTo(parent)

});

body {
  padding: 50px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 2px;
  padding: 8px 12px;
  font-size: 15px;
  color: #fff;
  margin-bottom: 20px;
  cursor: pointer;
  margin-left: 10px;
}

.field {
  width: 290px;
  overflow: hidden;
}

input {
  width: 220px;
  padding: 10px;
  float: left;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
  <input type="text" class="input" data-id="1" /><button>+</button>
</div>

Answer 2

Используйте clone(), чтобы скопировать весь элемент как новый объект jQuery.

$('button').on('click', function(event){
    
  var timestamp = Date.now(); //set this as data attribute

  var $input = $(this).siblings('input:first').clone();
  $input.data('id',timestamp) 
  $(this).parent().append($input); //set data-id to timestamp before appending  
  
  // show the data values for demo only
  $('input').val(function(){
      return $(this).data('id')
  })
 
});

body {
  padding: 50px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 2px;
  padding: 8px 12px;
  font-size: 15px;
  color: #fff;
  margin-bottom: 20px;
  cursor: pointer;
  margin-left: 10px;
}

.field {
  width: 290px;
  overflow: hidden;
}

input {
  width: 220px;
  padding: 10px;
  float: left;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
  <input type="text" class="input" data-id="1" /><button>+</button>
</div>

Answer 3

Вы можете использовать .attr( attributeName, value ) проверить документы здесь

$('button').on('click', function(event){
    
  var timestamp = Date.now(); //set this as data attribute

  var input = $(this).parent().find('input').prop('outerHTML');
  
  $(this).parent().append($(input).attr("data-id", timestamp)); //set data-id to timestamp before appending  
 
});

body {
  padding: 50px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 2px;
  padding: 8px 12px;
  font-size: 15px;
  color: #fff;
  margin-bottom: 20px;
  cursor: pointer;
  margin-left: 10px;
}

.field {
  width: 290px;
  overflow: hidden;
}

input {
  width: 220px;
  padding: 10px;
  float: left;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
  <input type="text" class="input" data-id="1" /><button>+</button>
</div>