开发者问题收集

使用 jquery 创建 Html 元素

2011-06-15
23367
javascript jquery dom

如何使用 jquery 创建类似下面的 div？最好使用类似于 $(document.createElement('div')); 的东西，或者除了 $("<div spry:region="myDs">{hostname}</div>"); 

<div spry:region="myDs">
    {hostname}
</div>

已编辑

如何将此代码放入另一个 JS 文件中并使用它，因为 "<%= request.getParameter(\"filepath\") %>" 正在产生问题 

var cpath="<%= request.getParameter(\"filepath\") %>";
var myDs = new Spry.Data.XMLDataSet(cpath, "csmclient/system");     
$(document).ready(function(){
    $('<div>')                      // Creates the element
    .attr('spry:region','myDs') // Sets the attribute spry:region="myDs"
    .html('{hostname}')         // Sets the inner HTML to {hostname}
    .appendTo('body');
});
3个回答

我很惊讶还没有人充分利用 jQuery 的链接功能： 

$('<div>')                      // Creates the element
    .attr('spry:region','myDs') // Sets the attribute spry:region="myDs"
    .html('{hostname}')         // Sets the inner HTML to {hostname}
    .appendTo('body')           // Append the newly created element to body

这里有一个 jFiddle 示例 ，展示了它的实际作用。

更新 以响应您的编辑
您将无法在外部 javascript 文件中使用 Request 对象，因为外部脚本文件是由浏览器在单独的请求中获取的。您可以通过编写返回 javascript 文件的 ASP.NET 处理程序脚本轻松解决问题，方法是执行以下操作：

  1. 在您的 ASP.NET 项目中创建一个新的处理程序。给它取一个合理的名称，比如 yourscriptname.js.ashx 。
  2. 将所有 javascript 代码复制到处理程序中的正确位置（您可能需要一个 Response.Write() 调用或其他内容...
  3. 将 <script> 元素的 src 标记从 somefile.js 更改为 somefile.js.asp?filepath=your/file.path 。

这样，当浏览器发送对 javascript 的请求时，请求对象将具有 "filepath" 的值，并且一切都将再次正常工作。当然，您需要在首先呈现它时将 your/file.path 更改为更相关的内容，以便从请求参数中获取页面的值。

Tomas Aschan
2011-06-15

要在 jQuery 中创建元素并附加它们： 

jQuery('<div/>', {
    "spry:region": "myDS",
    text: '{hostname}'
}).appendTo('body');

查看 此处 获取完整参考

Nicola Peluchetti
2011-06-15

首先， document.createElement('div') 是 javascript，不是 jQuery。如果您不想使用 jQuery： 

var main = document.getElementById('main');//where you want the div to be added
var div = document.createElement('div');
div.setAttribute("spry:region","myDs");
div.innerHTML = "{hostname}";
main.appendChild(div);

但 jQuery 使 DOM 操作更加容易，因此您可以使用上述答案之一 :)。

Vithozor
2011-06-15