Получить ноды в блоке div

#javascript #html

Есть примерно такой костяк разметки :




//...



Как мне получить и изменить атрибут одного из  input ?

UPD - блок div при первой загрузке страницы всего один. Однако по нажатию ЛКМ на
кнопку в документ добавляется еще один. В новом блоке div нужно поменять Educations[0].Facultet
на Educations[1].Facultet. И в каждом новом div счетчик должен увеличиваться на 1. 
Новый блок div добавляется так :

var non_ness = document.getElementById('not_necessery_prop');
var cloneNotNess = non_ness.cloneNode(true);
maindiv.appendChild(cloneNotNess);

    

Ответы

Ответ 1

function showInputValues() {
  var v3 = document.querySelector("input[name='Educations[3].Facultet']").value;
  var v1 = document.querySelector("input[name='Educations[1].Facultet']").value;
  var v0 = document.querySelector("input[name='Educations[0].Facultet']").value;
  console.log(v0, v1, v3);
}








Ответ 2

var i = 1;

function addNode(nodeID,targetID) {
  i++;
  var non_ness = document.getElementById(targetID);
  var maindiv = document.getElementById(nodeID);
  var cloneNotNess = non_ness.cloneNode(true);
  cloneNotNess.id = cloneNotNess.id + i;
  cloneNotNess.children[0].id += i;
  var iname = cloneNotNess.children[0].name;
  iname = iname.replace("[0]", "[" + i + "]");
  console.log(iname);
  maindiv.appendChild(cloneNotNess);
}


  

    
  



Ответ 3

Можно вот так попробовать.



class InputNode {
  static createInput(index, value = '') {
    let input = document.createElement('input');
    input.name = `Educations[${index}].Facultet`;
    input.value = value;

    return input;
  }
  constructor(index) {
    this.elementAll = [
      InputNode.createInput(index, `value_${index++}`),
      InputNode.createInput(index, `value_${index++}`),
      InputNode.createInput(index, `value_${index++}`),
    ]
  }
}

class Count {
  constructor() {
    this.count = 0;
  }

  getCount() {
    let count = this.count;
    this.count += 3;

    return count;
  }
}

let count = new Count();

document.addEventListener('click', () => {
  let main = document.querySelector('main');

  let inputNode = new InputNode(count.getCount());

  inputNode.elementAll.forEach(element => main.appendChild(element));
});



Ответ 4

//получаем основной костяк
var S = document.getElementById('s'),
    n=0;
function ND(){
//клонируем его
var cloneS = S.cloneNode(true);
//вставляем перед кнопкой
document.body.insertBefore(cloneS,document.getElementById("btn"));
//заменяем input-потомуку клона value (это для примера, вы можете и name и что угодно
менять) 
cloneS.querySelector("input").value=++n;
}







Ответ 5

Еще вариант 

var maindiv = document.getElementById('maindiv');
var div = document.getElementById('div');

var click = 0;

function create() {
  var cloneDiv = div.cloneNode(true);
  click++;
  var name = "Educations[" + click + "].Facultet";
  maindiv.appendChild(cloneDiv);
  cloneDiv.setAttribute('id','cloneDiv'+ click);
  cloneDiv.children[0].name = name;
}




  

    
   





Если несколько input'ов, можно сделать так:

var arr = [].slice.call(cloneDiv.children,this);
arr.forEach(function(item) {
    item.name = name;
});