jQuery .after() 函数有什么替代方法吗

发布于 2024-10-21 17:19:40 字数 404 浏览 3 评论 0原文

我正在尝试将 jQuery 脚本转换为 javascript。我在那里遇到问题..

我有一个创建节点的脚本

var new_node = document.createElement("div");
      new_node.className="tooltip";
      new_node.innerHTML = html;
      alert(new_node.className);

当我这样做时

jQuery(link).after(new_node);

它工作正常。但我想以 javascript 方式做到这一点。我尝试过使用appendChild函数，但它给出了一些奇怪的结果。

请帮我解决这个问题。

原文

I am trying to convert my jQuery script into javascript. I have a problem there..

I have a script that creates a node

var new_node = document.createElement("div");
      new_node.className="tooltip";
      new_node.innerHTML = html;
      alert(new_node.className);

When i do this

jQuery(link).after(new_node);

It works fine. But I want to do it javascript way. I have tried using appendChild function but it gives some strange results.

Please help me out with this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

山色无中 2024-10-28 17:19:40

您正在将 jQuery 的 after 与 appendChild 进行比较，但它们做的事情非常不同。 after 将元素放置在引用元素之后，appendChild 将其放置在其内部。

您可能想要 insertBefore（参考节点是link的nextSibling）。

所以：

var link = /* ... get the `a` element from somewhere ... */;
var new_node = document.createElement("div");
new_node.className="tooltip";
new_node.innerHTML = html;
link.parentNode.insertBefore(new_node, link.nextSibling);

如果 link 是其父级中的最后一个，那很好； link.nextSibling 将为 null 并且 insertBefore 接受 null 作为引用节点（这意味着“在末尾插入”）。

You're comparing jQuery's after with appendChild, but they do very different things. after puts the element after the reference element, appendChild puts it inside it.

You probably want insertBefore (with the reference node being link's nextSibling).

So:

var link = /* ... get the `a` element from somewhere ... */;
var new_node = document.createElement("div");
new_node.className="tooltip";
new_node.innerHTML = html;
link.parentNode.insertBefore(new_node, link.nextSibling);

If link is the last thing in its parent, that's fine; link.nextSibling will be null and insertBefore accepts null as the reference node (it means "insert at the end").

回复收藏 0 原文

淡写薰衣草的香 2024-10-28 17:19:40

假设您已经有一个实例化为 link 的节点，您可以用纯 Javascript 执行您想要的操作：

link.parentNode.appendChild(new_node);

link 节点必须是其容器中的最后一个节点。否则，您必须找到 link 的 nextSibling 并使用 insertBefore 将 new_node 放在正确的位置。

Assuming you already have a node instantiated as link, you could do what you want this way in plain Javascript:

link.parentNode.appendChild(new_node);

The link node would have to be the last node in its container. Otherwise you would have to find link's nextSibling and use insertBefore to put new_node in its proper place.

回复收藏 0 原文