javascript - 如何在所选元素之后/之前插入一个元素？

Question

这是我目前的代码:https://jsfiddle.net/e8en0htn/

Javascript

var addition = document.createElement('div');
    addition.innerHTML = 'TEST CONTENT HERE';
    addition.className = 'test-content';

var highlighted = document.querySelector('.highlight');

highlighted.parentNode.parentNode.insertBefore(addition,highlighted.parentNode);

目前，该代码只是将 .test-content 插入到 .highlight 的父元素之前。我想做的是在 .highlight 的父元素之前或之后插入 .test-content 一些元素。

这里棘手的部分:它可以是之前/之后 3 个元素，之前/之后 5 个元素等。因为它将取决于 .highlight 的数据属性:data-position 应该决定它是出现在元素之前还是之后； data-howfar 应该决定它出现的距离(前面 3 个元素、2 个元素等)。

我对 previousSibling 和 nextSibling 有一些有趣的想法，但显然有太多 .previousSibling.previousSibling.previousSibling 这样并不方便(特别是当它是 data 属性时)是 data-howfar="20"...太多 .previousSibling。

不幸的是，我坚持这个解决方案......有什么想法吗？

Answer 1

如果您知道每个段落节点都是相同的，则此代码将起作用。基本上，我循环遍历所有选定的段落节点，检查哪一个与突出显示元素的父级匹配。然后是一些检查数据属性的逻辑。

如果我正确理解您的需求，这个 fiddle 应该可以解决您的麻烦。

https://jsfiddle.net/9jjzksd3/

var addition = document.createElement('div');
addition.innerHTML = 'TEST CONTENT HERE';
addition.className = 'test-content';

var highlighted = document.querySelector('.highlight');
var pos = highlighted.getAttribute('data-position');
var howfar = parseInt(highlighted.getAttribute('data-howfar'));

var allNodes = document.querySelectorAll('.content > p');
var targetParent = highlighted.parentNode;

var targetParentIndex;
var insertIndex;

for(var i = 0; i < allNodes.length; i++){
    if (allNodes[i] === targetParent){
        targetParentIndex = i;
    }
}

if(pos === 'prev') {
    insertIndex = targetParentIndex - howfar;
} else {
    insertIndex = targetParentIndex + howfar;
}

highlighted.parentNode.parentNode.insertBefore(addition, allNodes[insertIndex]);

如果这是您想要的，我个人会将该逻辑抽象为它自己的辅助函数。希望这有帮助，请告诉我。