javascript - 输入标签未正确附加到 div 内。

Question

在我的 javascript 函数中，我得到了一个 div。

我的div是

var divDetails = args.val;

哪里divDetails = "<div id="chart_line" style="width:26%; background-color: lightblue;"></div>"

现在我必须添加一个输入标签，所以我在这里声明

var input = '<input class="easyui-combobox" name="language" style="width:100%;" data-options="\
                    url: "JSON/combobox_data1.json",\
                    method: "get",\
                    valueField: "id",\
                    textField: "text",\
                    panelWidth: 350,\
                    multiple:true,\
                    label: "Language:",\
                    labelPosition: "top"\
                    >';

我的输入正确。

"<input class="easyui-combobox" name="language" style="width:100%;" data-options="                    url: "JSON/combobox_data1.json",                    method: "get",                    valueField: "id",                    textField: "text",                    panelWidth: 350,                    multiple:true,                    label: "Language:",                    labelPosition: "top"                    >"

现在当我将此输入添加到 div divDetails.innerHTML = input 时我明白了

"<div id="chart_line" style="width:26%; background-color: lightblue;"><input class="easyui-combobox" name="language" style="width:100%;" data-options="                    url: " json="" combobox_data1.json",="" method:="" "get",="" valuefield:="" "id",="" textfield:="" "text",="" panelwidth:="" 350,="" multiple:true,="" label:="" "language:",="" labelposition:="" "top"=""></div>"

这是错误的。我想得到的是

"<div id="chart_line" style="width:26%; background-color: lightblue;"> 
       <input class="easyui-combobox" name="language" style="width:100%;" data-options="url: 'JSON/combobox_data1.json',method: 'get',valueField: 'id',textField: 'text',panelWidth: 350,multiple:true,label: 'Language:',labelPosition: 'top'"> 
    </div>"

你能告诉我我在这里做错了什么吗？

Answer 1

首先，不要将整个 Ajax 放入 data 属性中。无论如何你都不应该把它放在那里。但如果你确实必须这样做，那就正确地做。使用多个 data 属性而不是一个。

JavaScript

var input = document.createElement('input');

input.setAttribute('data-url', "JSON/combobox_data1.json");
input.setAttribute('data-method', "GET");
input.setAttribute('data-value', "id");
input.setAttribute('data-text', "text");
input.setAttribute('data-panel', "350");
input.setAttribute('data-multiple', "true");
input.setAttribute('data-label', "Language:");
input.setAttribute('data-position', "top");

document.getElementById('div').appendChild(input);

console.log(input.getAttribute('data-url'));

<div id="div"></div>

jQuery

$('<input/>', {
  data: {
    url: "JSON/combobox_data1.json",
    method: "GET"
    /* ... */
  }
}).appendTo('#div');

console.log($('input').data('url'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div"></div>