Question

我在下面这个div是kendo网格，我需要在JavaScript中动态创建它。

<div kendo-grid id="tempGrid" hidden="hidden" k-options="meterGridOptions" k-rebind="columns"></div>

Answer 1

您可以使用模板文字.insertAdjacentHTML()

＆＃13;

var div = `<div kendo-grid id="tempGrid" hidden="hidden" k-options="meterGridOptions" k-rebind="columns">div</div>`;

document.body.insertAdjacentHTML("beforeend", div);

＆＃13;

<body></body>

＆＃13;

Answer 2

var m=document.getElementById('d1');
m.setAttribute("style","height:50%");

Answer 3

您可以使用element.setAttributeNode(name, value)

＆＃13;

var myDiv = document.createElement("div");
myDiv.setAttribute("kendo-grid", "");
myDiv.setAttribute("id", "tempGrid");
myDiv.setAttribute("hidden", "hidden");
myDiv.setAttribute("k-options", "meterGridOptions");
myDiv.setAttribute("k-rebind", "columns");

document.body.appendChild(myDiv)

＆＃13;

Answer 4

我刚删除了属性hidden，以便它可见。

$(document).ready(function() {
  var div = $("<div/>", {
    "id": "tempGrid",
    "k-options": "meterGridOptions",
    "k-rebind": "columns"
  }).text("Created via Jquery");

  div.attr("kendo-grid", "");
  div.appendTo(".container");
});

.container {
  background-color: green;
  width: 100px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">

</div>

在javascript中动态添加带有属性的Div

4 个答案: