4

javascript から既存の html ページに新しい div を追加したいと思います。通常、これは document.createElement("div") という命令で行い、この div をメソッド div.innerHTML = "" (たとえば) で埋めます。ほとんどの場合、これで問題なく動作しますが、ここでは、選択リストを div に追加し、このリストにデータを入力したいと考えています。この方法は機能しません:

function initEdit(){
     addPanel = document.createElement("div");
     addPanel.innerHTML = "<form id='addProperty' method='get'> <table>" +
                                "<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'> </td>" +
                                     "<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
                                          "<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
                                "<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'> </td>" +
                                     "<td> </td> </tr>" +
                                "<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
                            "</table> </form>";

    $('body').jAlert(contents, 'info', offset);
    list1.forEach(function(element, id){
        var option = document.createElement("OPTION");
        option.text = option.value = property;
        form.data_property_selection.options.add(element);
    })
}

これを解決する方法を知っている人はいますか？(ところで: これはjAlert divの内容であるため、ページの最初にこの html コードを設定することはできません)

更新: 解決策

properties1.concat(properties2).forEach(function(property, id){
    if (id < object_properties.length) propertyList1 += "<option value='" + property + "'>" + property + "</option>";
    else propertyList2 += "<option value='" + property + "'>" + property + "</option>";
})
objects.forEach(function(feature, id) {
    objectList += "<option value='" + feature._id + "'>" + feature.name + "</option>";
})

propertyList = "<form id='addProperty' method='get'> <table>" +
                            "<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'>" +
                                       propertyList1 + "</select> </td>" +
                                 "<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
                                       objectList + "</select> </td>" +
                                      "<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
                            "<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'>" +
                                       propertyList2 + "</select> </td>" +
                                 "<td> </td> </tr>" +
                            "<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
                        "</table> </form>";
4

1 に答える 1

3

私の知る限り、この方法で目的を達成することは不可能です。を使用する代わりにinnerHTML、createElement を使用してすべての内部タグを作成し、それらを子として追加するという長い道のりを行う必要があります。jQuery を使用すると、この作業がはるかに簡単になります。

jQuery: linkと公式 APIでそれを行う方法の例を次に示します。

または、最初に内部リストを作成できる場合は、それを作成し、それを文字列として連結しますinnerHTML(最初にリストを作成し、次に edit のみinnerHTML)。

于 2012-04-16T17:59:50.227 に答える