相关疑难解决方法(0)

如何div在jQuery中创建元素？

我正在重构一些旧的JavaScript代码,并且正在进行大量的DOM操作.

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

我想知道是否有更好的方法来使用jQuery.我一直在尝试:

var odv = $.create("div");
$.append(odv);
// And many more

但我不确定这是否更好.

我看到人们用两种不同的方式在jQuery中创建HTML元素:

$('<element>')

和

$('<element />') 

我很好奇哪一个"更正确".我看到第一个显而易见的优点是只是简单地输入.根本使用哪一个会有所不同吗？

我试图使用jQuery动态创建如下的HTML表格:

<table id='providersFormElementsTable'>
    <tr>
        <td>Nickname</td>
        <td><input type="text" id="nickname" name="nickname"></td>
    </tr>
    <tr>
        <td>CA Number</td>
        <td><input type="text" id="account" name="account"></td>
    </tr>
</table>

这是我的实际表格:

<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>

这是将创建tr和td元素采取的方法id和labelText:

function createFormElement(id, labelText) {
    // create a new textInputBox button using supplied parameters
    var textInputBox = $('<input />').attr({
        type: "text", id: id, name: id
    });
    // create a new textInputBox using supplied parameters
    var inputTypeLable = $('<label />').append(textInputBox).append(labelText);

    // append the new radio button and …

"现代",因为该定义可能会随着时间而改变(具体而言,我指的是桌面浏览器)

"处理"因为根据机器配置/内存可能会有所不同,但具体而言我指的是一般用例.

对于我正试图解决的涉及大型数据集的特定问题,我想到了这个问题.

基本上,每当对特定数据集进行更改时,我都会返回完整的数据集,并且必须在浏览器中呈现此数据.

例如,在websocket上我得到一个推送事件,告诉我数据集有变化,然后我必须通过抓取现有的DOM元素,复制它,使用类名用这个集合中的数据填充元素来在HTML中呈现这个数据集或其他元素标识符,然后将其添加回DOM.

请记住,此数据集中的任何对象(JSON)可能包含多达1000个以上的子对象,并且可能有多达10,000个以上的父对象,因此您可以看到可能存在返回的数据集向上的实例接近1,000,000 => 10,000,000个数据点或更多.

现在有趣的部分来了,当我必须渲染这些东西.对于每个数据点,可能有3或4个标记用于呈现和样式化数据,并且可能有任何这些标记的事件侦听器(可能在父容器上使用委托来减轻事情).

总结一下,可能会有很多需要呈现的传入信息,我正试图找出处理这种情况的最佳方法.

理想情况下,您只想渲染具有更改而不是重新渲染整个集合的单个数据点的更改,但由于后端的设计方式,这可能不是一个选项.

我主要关心的是了解浏览器/ DOM的局限性,并通过前端的镜头来看待这个问题.在后端肯定会发生一些变化(数据设计,缓存,分页),但这不是重点.

这不是HTML/DOM 的典型用例,因为我知道它有局限性,但究竟是什么呢？我们仍然限制在大约3000-4000元素？

我有一些相关的 子问题,我正在积极地 查找 ,但我认为与stackoverflow社区的其余部分分享一些想法并尝试将有关此问题的信息汇总在一起会很好.

现代浏览器在开始变慢/无响应之前可以处理的"合理"数量的DOM元素是什么？

如何对浏览器可以处理的DOM元素数量进行基准测试？

有哪些策略可以处理需要渲染的大型数据集(除了分页)？

与使用jQuery或正则表达式相比,使用数据/ json(在前端)渲染html等模板框架(如胡子和把手)的性能更高吗？

使用Javascript我粗略地模拟布朗运动的粒子,但由于某种原因我不明白我的粒子向左和向左漂移.

该算法非常简单.每个粒子是一个div和我简单地增加或减少从每个随机数div的top和left每一轮的位置.

我Math.random()稍微阅读了一下,我试图使用一个函数来返回一个随机数min来max包含:

// Returns a random integer between min and max  
// Using Math.round() will give you a non-uniform distribution!  
function ran(min, max)  
{  
    return Math.floor(Math.random() * (max - min + 1)) + min;  
} 

这是粒子运动的功能:

var x, y, $elie, pos, nowX, nowY, i, $that;    

function moveIt()
{
    $("div.spec").each(function(i, v) {
        x = ran(-5, 5);
        y = ran(-5, 5);
        $elie = $(v);
        pos = $elie.position(); …

我正在尝试将背景图像添加到动态生成的div中.当我为背景添加CSS属性时,如下所示,它会破坏我的插件:

$("<div>", {
    'class': "iviewer_image_mask",
    css: "background: url('http://somesite.com/path/to/image.jpg');"
}).appendTo(this.container);

有人知道我做错了添加背景图片吗？

我需要使用Jquery动态创建10个按钮,并将它们上的文本设置为1-10,并将相同的单击事件添加到所有按钮.

我应该使用dom创建元素还是其他东西？

这个问题可能是愚蠢的,也可能是基本的.

有人可以解释哪个是添加DOM元素的最佳方法.我们有两种添加DOM元素的方法.

场景:需要<strong>Hi</strong>在现有内部添加<div id="theEl"></div>.

1. 通过编辑其中的HTML.

   document.getElementById("theEl").innerHTML = '<strong>Hi</strong>';
   

   Run Code Online (Sandbox Code Playgroud)

2. 通过使用document.createElement().

   var hi = document.createTextNode("Hi"),
   strong = document.createElement("strong");
   strong.appendChild(hi);
   mydiv = document.getElementById("theEl");
   document.body.insertBefore(strong, mydiv);
   

   Run Code Online (Sandbox Code Playgroud)

问题

1. 什么是最好的方法？一个是单行,另一个是大约五行.
2. 性能方面是什么？
3. 什么是正确的方法或最佳做法？
4. 整个代码之间有什么区别吗？

如果这个问题没有意义,请告诉我,我很乐意关闭这个,甚至删除它.谢谢.

更新

对于亲密的选民来说,这不会是这个问题的重复.我刚才提到的一件事是,使用createElement()保留附加到元素的事件处理程序.即使这是一个好点,任何类型的基本网页,其中也有jQuery,它提供委托和这样的东西,允许我甚至在HTML更改后将事件附加到元素.

伙计们,请密切投票,保持冷静.一种研究.

我正在尝试将输入文本字段及其值附加为div的值.

这是我到目前为止的结果:

$(this).append('<input type="text" value=' $('#div1').val() '>');