Question

我有以下HTML

<div id="form">
        <div id="test">
            <textarea name="" placeholder="input_form" id="" cols="30" rows="10"></textarea>
        </div>
    </div>

我正在尝试基于JSON数据构建表单

for (i in response[key].request_fields) {
var values = ( () => {
    var out = "";
    for(var e in response[key].request_fields[i].values){
        out += "<li class='item_check'>" + 
                    "<input type='checkbox' id='" + response[key].request_fields[i].values[e] + "'>" +
                    "<label for='" + response[key].request_fields[i].values[e] + "'>" 
                        + response[key].request_fields[i].values[e] + 
                    "</label>" + 
                "</li>";
    }
    return out;
})();

document.getElementById("test").innerHTML += "<div class='form_section'>" + 
                                                "<label>" + response[key].request_fields[i].label + "</label>" + 
                                                "<ul>" + values + "</ul>" + 
                                             "</div>";  
}

它正常工作，除了我需要在我的textarea之前打印这个结果。我该如何预先添加它？

Answer 1

您可以获取parentNode并使用insertBefore函数插入新元素

＆＃13;

var parent = document.getElementById("test");
var txa = parent.querySelector('textarea');
var div = document.createElement('div');
div.class = 'form_section';
div.innerHTML = "<label>My label text</label>" + 
                "<ul><li>val1</li><li>val2</li></ul>";
parent.insertBefore(div, txa);

＆＃13;

<div id="form">
  <div id="test">
    <textarea name="" placeholder="input_form" id="" cols="30" rows="10"></textarea>
  </div>
</div>

＆＃13;

Answer 2

以下是如何使用正确的DOM操作来完成此操作。虽然它比原始代码更冗长，但它对包含特殊字符的任意值（如&，<等）更具弹性，并且不依赖于它们在脆弱的字符串连接上。

要点是：

document.createElement创建元素
appendChild附加子元素
insertBefore在另一个元素之前插入元素

＆＃13;

var response = getResponse();
var key = '_embedded';

function liItemForValue(value) {
  var li = document.createElement('li');
  li.classList.add('item_check');

  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.id = value;

  var label = document.createElement('label');
  label.for = value;
  label.textContent = value;

  li.appendChild(checkbox);
  li.appendChild(label);

  return li;
}

function makeFormSection(rf) {
  var liItems = Object.keys(rf.values).map(function(key) {
    return liItemForValue(rf.values[key]);
  });

  var formSection = document.createElement('div');
  formSection.classList.add('form_section');

  var label = document.createElement('label');
  label.innerText = rf.label;

  var ul = document.createElement('ul');

  liItems.forEach(function(liItem) {
    ul.appendChild(liItem);
  });

  formSection.appendChild(label);
  formSection.appendChild(ul);

  return formSection;
}

var formSections = response[key].request_fields.map(makeFormSection);

var test = document.getElementById('test');
var textarea = test.querySelector('textarea');

formSections.forEach(function(formSection) {
  test.insertBefore(formSection, textarea);
});


function getResponse() {
  return {
    "_embedded": {
      "request_fields": [{
        "reference": null,
        "name": "Qual será o serviço?",
        "label": "Qual será o serviço?",
        "placeholder": "Qual será o serviço?",
        "values": {
          "Coloração": "Coloração",
          "Corte": "Corte",
          "Escova ": "Escova ",
          "Escova progressiva/definitiva": "Escova progressiva/definitiva",
          "Luzes": "Luzes"
        }
      }, {
        "reference": null,
        "name": "Para quem será o serviço?",
        "label": "Para quem será o serviço?",
        "placeholder": "Para quem será o serviço?",
        "values": {
          "Criança": "Criança",
          "Homem": "Homem",
          "Mulher": "Mulher"
        }
      }]
    }
  };
}

＆＃13;

<div id="form">
  <div id="test">
    <textarea name="" placeholder="input_form" id="" cols="30" rows="10"></textarea>
  </div>
</div>

＆＃13;

使用纯javascript预装动态元素

2 个答案: