纯 Javascript 中的 jQuery 代码答案

【问题标题】：jQuery code in plain Javascript纯 Javascript 中的 jQuery 代码
【发布时间】：2009-03-20 08:22:53
【问题描述】：

如何用纯 Javascript 编写这个 jQuery 代码？

我不能在将要使用它的地方使用 jQuery。

$(function(){
$("td#dark[height='260']").append("<a href='http://www.website.com'></a>");
});

【问题讨论】：

而 this 就是为什么我对 jQuery 有问题...
嗯？因为它很简单，而且它的过滤器很强大？
我认为这是因为您有多个 id 为“dark”的元素......这非常非常糟糕。如果你解决了这个问题，那么你可以简单地使用 document.getElementById('dark') 并使用内置的 dom 方法（appendChild 等）。

标签： javascript jquery html

【解决方案1】：

试试这个：

var elem = document.getElementById("dark");  // #dark
if (elem && elem.nodeName == "TD" && elem.height == 260) {  // td#dark[height='260']
    var newElem = document.createElement("a");
    newElem.href = "http://www.example.com";
    elem.appendChild(newElem);
}

对于在多个元素上使用相同 ID 的非标准文档：

var elems = document.getElementsByTagName("td");
for (var i=0; i<elems.length; i++) {
    var elem = elems[i];
    if (elem.id == "dark" && elem.height == 260) {  // td#dark[height='260']
        var newElem = document.createElement("a");
        newElem.href = "http://www.example.com";
        elem.appendChild(newElem);
    }
}

【讨论】：

这几乎就是我会做的。确保他也注意到 +=。
谢谢，但问题是该站点非常不标准，并且在 td 和 table 标签上都使用了几个 ID dark。关于如何让它发挥作用的任何想法？
另外，由于您不能在 $() 中包装启动函数，请确保设置 onload 以便首先加载您的 DOM
-1 从不使用“innerHTML+=”。这将序列化并重新解析 td 的内容，丢失任何 JavaScript 属性，例如事件处理程序、侦听器和对象，并引用其中的节点。
bobince：我应该改用什么？

【解决方案2】：

但问题是该站点非常不标准，并且在 td 和 table 标签上都使用了几个 ID dark。关于如何使它工作的任何想法？ – mofle

您将需要遍历正文中的每个 HTML 元素（xpath 是理想的），获取标签，查看它是否为 td，如果是，则读取 height 元素并查看它是否等于 260。这是因为 .getElementById只会返回一个结果，因为应该只存在一个 ID，但正如您所说，该网站是非标准的。

【讨论】：