Possible to move or copy existing element in DOM into a different location

[peace2000]

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?

I don't have a specific site I could link.

[uBlock-user]

Example ? I can't think of steps to do it unless and untill I have something to work with.

[peace2000]

Ok, this is of course totally random example, but:

https://www.is.fi/

Move (or copy) element
.nav-bar__link-bar
directly under
#header
as a first child element.

->

[uBlock-user]

is.fi##+js(ieb, .nav-bar__link-bar, display:block, section[class="text-positive bg-header-main"], ul) should work.

You still will have to delete the original by yourself though, my scriptlet doesn't do it.

[peace2000]

For some reason, it doesn't work. Tested on FF and on Chrome.

[uBlock-user]

Yeah seems so. Don't know why.

[peace2000]

I made some tests with another site.

https://www.ampparit.com/

I'm trying to copy element .social-media-feedback-link before #react-view.

This one seems to work fine:

ampparit.com##+js(ieb, .social-media-feedback-link, , [id="react-view"], div)

But this doesn't:

ampparit.com##+js(ieb, [class="social-media-feedback-link"], , [id="react-view"], div)

For me it seems that square bracket form doesn't work in the element-to-be-copied. Is this intentional?

[uBlock-user]

Is this intentional?

No. Why would it be ?

[uBlock-user]

[class="social-media-feedback-link"]

Must be slow to evaluate in the browser itself. My scriptlet has no flaws, so the issue is not on my side.

Try this version --

/// iebt.js
(() => {
		const identifier = '{{1}}';
		if ( identifier === '' || identifier === '{{1}}' ) { return; }
		const identifiers = identifier.split(/\s*\|\s*/);
		const behavior = '{{5}}';
		const insertelem = () => {
						let timer = undefined;
						try {
							for (const token of identifiers) {
							     const element = document.createElement('{{4}}');
							     const node = document.querySelector('{{3}}');
							     if (token.charAt(0) === '#') {
							    	 element.id = token.substring(1);
							     } else if (token.charAt(0) === '.') {
							    	 element.className = token.substring(1);
							     } else { return; }	 
							     element.style.cssText = '{{2}}';
							     document.body.insertBefore(element, node);
							}	
						} catch { }
	   	};
		const mutationHandler = mutations => {
			if ( timer !== undefined ) { return; }
			let skip = true;
			for ( let i = 0; i < mutations.length && skip; i++ ) {
			    const { type, addedNodes, removedNodes } = mutations[i];
			    if ( type === 'attributes' ) { skip = false; }
			    for ( let j = 0; j < addedNodes.length && skip; j++ ) {
				if ( addedNodes[j].nodeType === 1 ) { skip = false; break; }
			    }
			    for ( let j = 0; j < removedNodes.length && skip; j++ ) {
				if ( removedNodes[j].nodeType === 1 ) { skip = false; break; }
			    }
			}
			if ( skip ) { return; }
			timer = self.requestIdleCallback(insertelem, { timeout: 10 });
		    };
		    const start = ( ) => {
			insertelem();
			if ( /\bloop\b/.test(behavior) === false ) { return; }
			const observer = new MutationObserver(mutationHandler);
			observer.observe(document.documentElement, {
			    attributes: true,
			    childList: true,
			    subtree: true,
			});
		    };
		    if ( document.readyState !== 'complete' && /\bcomplete\b/.test(behavior) ) {
			self.addEventListener('load', start, { once: true });
		    } else if ( document.readyState === 'loading' ) {
			self.addEventListener('DOMContentLoaded', start, { once: true });
		    } else {
			start();
		    }
})();

Filter is.fi##+js(iebt, .nav-bar__link-bar, display:block, section[class="text-positive bg-header-main"], ul, loop)

[peace2000]

Nope, still not... Does that work on your end?

[uBlock-user]

I think, I misunderstood your question. You want to place that element as first-child. For that you will need to use Element.prepend()

[uBlock-user]

@peace2000 Is that what you want ?

[peace2000]

In this case, yes but not necessarily universally. The point is to be able to place element X before element Y (element X is not always supposed to be the first child, it just needs to be before element Y).

Sorry if I'm unclear.

[uBlock-user]

element X is not always supposed to be the first child,

Element.prepend() is specific for inserting as first-child only. Will need to at element.before and element.after then.

[uBlock-user]

The point is to be able to place element X before element Y

/// insert-child-before.js
// is.fi##+js(insert-child-before, section.text-positive.bg-header-main, .nav-bar__link-bar)
 (() => {
		const selector = '{{1}}';
		if ( selector === '' || selector === '{{1}}' ) { return; }
	        const element = '{{2}}';
		if ( element === '' || element === '{{2}}' ) { return; }
		const behavior = '{{3}}';
		let timer = undefined;
		const insertelem = () => {
			try {
				const elems = document.querySelectorAll(selector);
				const nodes = document.querySelectorAll(element);
				for (let i = 0; i < elems.length; i++) {
				    elems[i].before(nodes[i]);
				}	
			} catch { }
	   	};
		const mutationHandler = mutations => {
			if ( timer !== undefined ) { return; }
			let skip = true;
			for ( let i = 0; i < mutations.length && skip; i++ ) {
			    const { type, addedNodes, removedNodes } = mutations[i];
			    if ( type === 'attributes' ) { skip = false; }
			    for ( let j = 0; j < addedNodes.length && skip; j++ ) {
				if ( addedNodes[j].nodeType === 1 ) { skip = false; break; }
			    }
			    for ( let j = 0; j < removedNodes.length && skip; j++ ) {
				if ( removedNodes[j].nodeType === 1 ) { skip = false; break; }
			    }
			}
			if ( skip ) { return; }
			timer = self.requestIdleCallback(insertelem, { timeout: 10 });
		};
		const start = ( ) => {
			insertelem();
			if ( /\bloop\b/.test(behavior) === false ) { return; }
			const observer = new MutationObserver(mutationHandler);
			observer.observe(document.documentElement, {
			    attributes: true,
			    childList: true,
			    subtree: true,
			});
		};
		if ( document.readyState !== 'complete' && /\bcomplete\b/.test(behavior) ) {
		     self.addEventListener('load', start, { once: true });
		    } else if ( document.readyState === 'loading' ) {
		     self.addEventListener('DOMContentLoaded', start, { once: true });
		    } else {
		     start();
		}
})();

@peace2000 This works for inserting an element before any child element of a parent element.

[peace2000]

@uBlock-user Hi, thanks your icb and ica scripts work fine!

Though is.fi seems to fight back (using loop is required) other sites I tested with are ok. Great!

PS. You might want to move this discussion into your scriplet repo, this was wrong repo I accidentally chose.

[uBlock-user]

using loop is required)

Should work with complete too. On my side it works with the above filter.