在javascript中动态添加属性

问题描述：

我有下面的div，这是kendo网格，我需要在JavaScript中动态创建它。在javascript中动态添加属性

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

哪里是你的DIV？ – hamzox

Div需要放在身体。 – user1494438

答

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

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

 
document.body.insertAdjacentHTML("beforeend", div);

<body></body>

答

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

尽管此代码可能会回答问题，但提供有关如何解决问题和/或为何解决问题的其他上下文可以提高答案的长期价值。 –

答

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

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)

答

我刚刚删除了属性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中动态添加属性

相关推荐