Question

我想知道是否有一个jquery（或其他一些库）函数允许我根据其属性在两个其他节点（div）之间插入一个节点（div）。

例如：

假设我有这个HTML代码：

<div value=111/>
<div value=222/>
<div value=444/>

我想在222和444之间插入<div value=333/>。

感谢所有帮助者。

Answer 1

jQuery为此提供了多种方法：insertBefore，insertAfter，before和after。

DOM提供insertBefore和insertAdjacentHTML。

例如，使用jQuery的before：

$("div[value=444]").before("<div value=333></div>");

或使用DOM的insertBefore：

var div = document.createElement("div");
div.setAttribute("value", "333");
var target = document.querySelector("div[value=444]");
target.parentNode.insertBefore(div, target);

或使用DOM的insertAdjacentHTML：

document.querySelector("div[value=444]").insertAdjacentHTML(
    "beforebegin",
    "<div value=333></div>"
);

旁注：div不是void element，<div />不是自动关闭标记，而是start tag，其中包含/这被忽略了。

附注2：value不是div元素的有效属性。

Answer 2

使用after(); 这是codepen中的工作示例 https://codepen.io/anon/pen/BVjbqZ

Answer 3

是的，你可以这样做。

使用div

querySelector

使用after方法在上一步获得的元素之后添加新元素

＆＃13;

const div = document.createElement('div');
div.textContent = 'three';

const target = document.querySelector('div[value=two]');

target.after(div);

＆＃13;

<div value="one">one</div>
<div value="two">two</div>
<div value="three">four</div>

＆＃13;

要动态找到正确的位置，您可以像这样使用find方法。

找到值大于您提供的元素的第一个元素
使用before方法将新元素放在上一步中的元素之前

＆＃13;

const myValue = 333;

const div = document.createElement('div');
div.textContent = myValue;

const target = [...document.querySelectorAll('div')]
  .find(v => Number(v.getAttribute('value')) > myValue );

target.before(div);

＆＃13;

<div value="111">111</div>
<div value="222">222</div>
<div value="444">444</div>

＆＃13;

根据属性条件在两个节点之间插入节点？

3 个答案: