Dont move input when append

[Raiikou]

Hello,
I’m trying to prevent my input move when I append it to form.
I have this:

<div class="card-wrapper"></div>
<form id="cardforms"></form>

var number = document.getElementById("#numinp");  
var att = document.createAttribute("name");
att.value = "number";   
number.setAttributeNode(att);
$('#cardforms').append(number);    
   
          new Card({
            form: document.querySelector('form'),
            container: '.card-wrapper'
        });

The other inputs are not being affected because I don’t use javascript to refer them, but if I do, all the inputs are overlapping one to another in the same position.

Any idea to handle this?
Is possible to append, and after running the “new Card” code, un-append or something like that?

Thanks!

[m3g4p0p]

@Raiikou

I’m trying to prevent my input move when I append it to form.

You can clone that input and append the copy:

var number = document.getElementById('numinp').cloneNode()
var form = document.getElementById('cardforms')

number.name = 'number'
form.appendChild(number)

Or using jQuery:

$('#numinp').clone().attr('name', 'number').appendTo('#cardforms')

[Raiikou]

Thanks for your answer @m3g4p0p but with your answer 2 questions come to my head:
1- The “clone” will be visible?
This is how looks like with append input:
https://puu.sh/B1Kba/4eeb8c9543.png

2- Does the clone also get the value of the original input? If yes, If I modify the original input, the clone will update the value at the same time?

Thanks!

[m3g4p0p]

@Raiikou

The “clone” will be visible?

Yes… from the image it looks like you want to hide the original though? E.g. using jQuery:

$('#numinp')
  .hide()
  .clone()
  .show()
  .attr('name', 'number')
  .appendTo('#cardforms')

@Raiikou

Does the clone also get the value of the original input? If yes, If I modify the original input, the clone will update the value at the same time?

Yes, but subsequent changes to the value will not get reflected either way.

[Raiikou]

@m3g4p0p

$(‘#numinp’) .hide() .clone() .show() .attr(‘name’, ‘number’) .appendTo(‘#cardforms’)

What’s the alternative in javascript instead of jquery? For some reason is not creating the clone.

var number = document.getElementById("#numinp");  
var att = document.createAttribute("name");
att.value = "number";   
number.setAttributeNode(att);
$("#numinp").hide().clone().attr('name', 'number').appendTo('#cardforms');

Thanks again!!

EDIT:

var number = document.getElementById("#numinp");  
var att = document.createAttribute("name");
att.value = "number";   
number.setAttributeNode(att);
var number2 = document.getElementById("#numinp").cloneNode()
var form = document.getElementById('cardforms')
number2.name = 'number'
form.appendChild(number2)

This one works, how i can make it hidden?

Edit2:
Btw actually the form looks like this when load page:
https://puu.sh/B1UlX/48febc4afc.png
Seems is not loading correctly the value, or the library element is not detecting the value of the clone input.

[m3g4p0p]

@Raiikou

This one works, how i can make it hidden?

The equivalent to the jQuery .hide() method would be

number.style.display = 'none'

Or if that element just serves as a sort of template you might also hide it completely like

number.hidden = true

@Raiikou

Btw actually the form looks like this when load page:

You might also add the hidden attribute directly to the markup to avoid that… but if it is not supposed to be used directly anyway, another possibility would be to only create it with JS in the first place; like .e.g.

var number = document.createElement('input')
var form = document.getElementById('cardforms')

number.type = 'number'
number.name = 'number'
form.appendChild(number)