Question

曾经尝试在线寻求帮助，但没有运气。

我已经制作了一个按钮，可以动态插入输入字段，但是似乎无法在每个字段旁边添加标签。我敢肯定这是一个小问题，但今天我的大脑无法正常工作。

<script text="javascript"> 
    var i = 0;

    function increment() {
      i += 1;
    }
    function addeducationfields() {
      var r = document.createElement('div');
      //Inputs
      var ie = document.createElement("INPUT");
      var n = document.createElement("INPUT");
      var l = document.createElement("INPUT");
      var s = document.createElement("INPUT");
      //Labels
      var x = document.createElement("LABEL");
      var t = document.createTextNode("Iestādes Nosaukums:");
      var o = document.createElement("LABEL");
      var p = document.createTextNode("Gads no - līdz:");
      var q = document.createElement("LABEL");
      var w = document.createTextNode("Specialitāte");
      //Breaks
      var b = document.createElement("br")
      var b1 = document.createElement("br")
      var b2 = document.createElement("br")
      var b3 = document.createElement("br")

      ie.setAttribute("class", "Edinput1");
      ie.setAttribute("type", "text");
      ie.setAttribute("placeholder", "Iestādes nosaukums");
      n.setAttribute("class", "Edinput2");
      n.setAttribute("type", "text");
      n.setAttribute("placeholder", "No");
      l.setAttribute("class", "Edinput3");
      l.setAttribute("type", "text");
      l.setAttribute("placeholder", "Līdz");    
      s.setAttribute("class", "Edinput4");
      s.setAttribute("type", "text");
      s.setAttribute("placeholder", "Specialitāte");   

      x.setAttribute("for", "Edinput1");
      x.appendChild(t);
            document.getElementById("Education").insertBefore(x,document.getElementById("Edinput1"));

      increment();

      ie.setAttribute("name", "EdName[ " + i + " ][0]"); //Keep attribute in lower case
      r.appendChild(ie);
      r.appendChild(b);

      n.setAttribute("name", "Year1[ " + i + "][1]");
      r.appendChild(n); 

      l.setAttribute("name", "Year2[ " + i + " ][2]"); 
      r.appendChild(l);
      r.appendChild(b2);

      s.setAttribute("name", "Specialitate[ " + i + "][3]");
      r.appendChild(s);
      r.appendChild(b3);


      document.getElementById("Education").appendChild(r);   

}
</script>

需要添加更多文本，因为它说我有太多代码。 123456789123456789123456789123456789123456789123456789

Answer 1

我会将输入包装在标签标签中。在这里，我还使用了document fragment来附加元素，然后再将它们添加到DOM。

const frag = document.createDocumentFragment();

const label = document.createElement('LABEL');
const labelText = document.createTextNode('Iestādes Nosaukums');
const input = document.createElement('INPUT');
input.setAttribute('type', 'text');
label.appendChild(labelText);
label.appendChild(input);

frag.appendChild(label);

document.body.appendChild(frag)

标签在相应输入的左侧。

这是我在评论中提到的建议。它使用一个对象来存储可以迭代的元素数据（我使用了map，但是可以使用简单的for / loop来生成HTML），然后可以将其附加到页面上。

const data = [{
    label: 'Iestādes Nosaukums',
    placeholder: 'Iestādes nosaukums',
    type: 'text'
  },
  {
    label: 'Gads no - līdz',
    placeholder: 'No',
    type: 'text'
  },
  {
    label: 'Specialitāte',
    placeholder: 'Specialitāte',
    type: 'text'
  }
];

const html = data.map(input => {
  return (
    `<label for="${input.label}">${input.label}
    <input id="${input.label}" class="edit" placeholder="${input.placeholder}" type="${input.type}" />
    </label>`
  );
}).join('');

document.body.innerHTML = html;

label {
  display: block;
}

请注意，在此示例中，我还包含了for和id属性to aid with accessibility。

在输入字段之前插入标签

1 个答案: