如何使用jQuery正确动态创建嵌套Div实现多语言输入框？

我需要为应用参数配置的每种语言创建翻译输入字段，要动态生成Div、标签和输入框，最终在表格单元格里得到如下结构：

<td>
  <div class="translation-block">
    <div class="row mat-form-row translated-name-row">
      <div class="mat-form-field col-md-12">
        <label for="definition-name-en" class="mat-form-field-label"> name </label>
        <label for="definition-name-en" class="translation-label"> en </label>
        <input id="definition-name-en" name="annotations[0][name][en]" type="text" value="Standard code, follows Eurostat Standard Code List Guidelines" class="mat-input-element translated_name_input">
      </div>
    </div>
    <div class="row mat-form-row translated-name-row">
      <div class="mat-form-field col-md-12">
        <label for="definition-name-de" class="translation-label"> de </label>
        <input id="definition-name-de" name="annotations[0][name][de]" type="text" value="" class="mat-input-element translated_name_input">
      </div>
    </div>
<!-- 其他语言的结构 -->
  </div>
</td>

但现在生成的代码里Div没有按预期嵌套，而是同级排列：

<td>
  <div class="translation-block">
    <div class="row mat-form-row translated-name-row"></div>
      <div class="mat-form-field col-md-12"></div>
<!-- 其他错误结构 -->
</td>

我用jQuery实现，试了多种方案都没解决，以下是我的代码：

function createCellTranslatedInput(id, columnName, value) {
  var languages = <%= raw parameters_for('languages').sort_by { |e| [e.property == current_language.to_s ? 0 : 1, e.property] }.map {|l| l.property} %>;
  console.log("Languages: ", languages);
  var td = $('<td/>');
  var divOpen = $('<div class="translation-block">');
  var divClose = $('</div>');
  var section = $('<div class="translation-block">');
  for (var language in languages) {
    console.log("Language: ", languages[language]);
    var name = ('annotations').concat('[', (rowCount).toString(), '][', columnName,'][', languages[language],']');
    var id = 'definition-' + columnName + '-' + languages[language] ;
    var field = $(
      '<input>', {
          id: id,
          name: name,
          type: 'text',
          value: value[languages[language]],
          class: "mat-input-element translated_name_input"
        });
    section.append('<div class="row mat-form-row translated-' + columnName + '-row">')
      .append('<div class="mat-form-field col-md-12">')
      .append( (language > 0) ? null : '<label for="definition-' + columnName + '-' + languages[language] +'" class="mat-form-field-label"> ' + columnName + ' </label>')
      .append('<label for="definition-' + columnName + '-' + languages[language] +'" class="translation-label"> ' + languages[language] + ' </label>')
      .append(field);
    console.log("Section:", section);
  }
  section.appendTo(td);
  return td;
}

问题出在直接用append()拼接字符串形式的标签时，jQuery会自动闭合这些标签，导致无法实现嵌套。正确的做法是先创建嵌套的DOM元素对象，再逐层添加内容：

修改后的代码 #

function createCellTranslatedInput(id, columnName, value) {
  var languages = <%= raw parameters_for('languages').sort_by { |e| [e.property == current_language.to_s ? 0 : 1, e.property] }.map {|l| l.property} %>;
  console.log("Languages: ", languages);
  var td = $('<td/>');
  var section = $('<div class="translation-block">');
  
  for (var language in languages) {
    console.log("Language: ", languages[language]);
    var langCode = languages[language];
    var name = `annotations[${rowCount}][${columnName}][${langCode}]`;
    var inputId = `definition-${columnName}-${langCode}`;
    
    // 创建输入框元素
    var field = $(
      '<input>', {
          id: inputId,
          name: name,
          type: 'text',
          value: value[langCode] || '',
          class: "mat-input-element translated_name_input"
        });
    
    // 创建最内层的表单字段容器
    var formField = $('<div class="mat-form-field col-md-12">');
    
    // 仅第一个语言添加主标签
    if (language == 0) {
      formField.append(`<label for="${inputId}" class="mat-form-field-label"> ${columnName} </label>`);
    }
    // 添加语言标签和输入框到表单容器
    formField.append(`<label for="${inputId}" class="translation-label"> ${langCode} </label>`)
             .append(field);
    
    // 创建行容器并嵌套表单容器
    var row = $(`<div class="row mat-form-row translated-${columnName}-row">`);
    row.append(formField);
    
    // 将行容器添加到外层区块
    section.append(row);
  }
  
  section.appendTo(td);
  return td;
}

关键修改说明 #

• 不再直接拼接字符串标签，而是先创建每个层级的DOM对象（row、formField），确保嵌套关系正确
• 严格按照嵌套顺序组装元素：输入框/标签 → mat-form-field → row → section
• 使用模板字符串替代繁琐的字符串拼接，提升代码可读性
• 给输入框value设置默认空值，避免因无数据导致的报错

内容的提问来源于stack exchange，提问作者user1185081