René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"QAPage","mainEntity":{"@type":"Question","name":"Possible to move or copy existing element in DOM into a different location","text":"
Hi @uBlock-user ! Does any of your custom scriplets make it possible to copy or move (rather move) a specific element in a DOM tree into a different location in the same DOM tree?
\n
I don't have a specific site I could link.
","upvoteCount":1,"answerCount":4,"acceptedAnswer":{"@type":"Answer","text":"
\n
The point is to be able to place element X before element Y
\n
\n
/// insert-child-before.js\n// is.fi##+js(insert-child-before, section.text-positive.bg-header-main, .nav-bar__link-bar)\n (() => {\n\t\tconst selector = '{{1}}';\n\t\tif ( selector === '' || selector === '{{1}}' ) { return; }\n\t        const element = '{{2}}';\n\t\tif ( element === '' || element === '{{2}}' ) { return; }\n\t\tconst behavior = '{{3}}';\n\t\tlet timer = undefined;\n\t\tconst insertelem = () => {\n\t\t\ttry {\n\t\t\t\tconst elems = document.querySelectorAll(selector);\n\t\t\t\tconst nodes = document.querySelectorAll(element);\n\t\t\t\tfor (let i = 0; i < elems.length; i++) {\n\t\t\t\t    elems[i].before(nodes[i]);\n\t\t\t\t}\t\n\t\t\t} catch { }\n\t   \t};\n\t\tconst mutationHandler = mutations => {\n\t\t\tif ( timer !== undefined ) { return; }\n\t\t\tlet skip = true;\n\t\t\tfor ( let i = 0; i < mutations.length && skip; i++ ) {\n\t\t\t    const { type, addedNodes, removedNodes } = mutations[i];\n\t\t\t    if ( type === 'attributes' ) { skip = false; }\n\t\t\t    for ( let j = 0; j < addedNodes.length && skip; j++ ) {\n\t\t\t\tif ( addedNodes[j].nodeType === 1 ) { skip = false; break; }\n\t\t\t    }\n\t\t\t    for ( let j = 0; j < removedNodes.length && skip; j++ ) {\n\t\t\t\tif ( removedNodes[j].nodeType === 1 ) { skip = false; break; }\n\t\t\t    }\n\t\t\t}\n\t\t\tif ( skip ) { return; }\n\t\t\ttimer = self.requestIdleCallback(insertelem, { timeout: 10 });\n\t\t};\n\t\tconst start = ( ) => {\n\t\t\tinsertelem();\n\t\t\tif ( /\\bloop\\b/.test(behavior) === false ) { return; }\n\t\t\tconst observer = new MutationObserver(mutationHandler);\n\t\t\tobserver.observe(document.documentElement, {\n\t\t\t    attributes: true,\n\t\t\t    childList: true,\n\t\t\t    subtree: true,\n\t\t\t});\n\t\t};\n\t\tif ( document.readyState !== 'complete' && /\\bcomplete\\b/.test(behavior) ) {\n\t\t     self.addEventListener('load', start, { once: true });\n\t\t    } else if ( document.readyState === 'loading' ) {\n\t\t     self.addEventListener('DOMContentLoaded', start, { once: true });\n\t\t    } else {\n\t\t     start();\n\t\t}\n})();\n
\n
@peace2000 This works for inserting an element before any child element of a parent element.
","upvoteCount":1,"url":"https://github.com/orgs/uBlockO/discussions/20#discussioncomment-5404543"}}}