我正在尝试编写一个Tampermonkey脚本来扩展我使用的业务Web应用程序。在非常基本的意义上，页面上会出现某些URL，我需要从URL中提取一个数字，然后使用该数字构建一个新链接并追加到父元素上。
到目前为止，我有以下代码，但当我单击元素（分页仅为UL）或文档加载时它不起作用。我知道该函数可以工作，因为当我将其设置为在文档的任何位置单击时运行时，它可以工作。就好像页面在JS报告加载完全之前并没有完全加载一样。

// 获取分页元素
var element = document.getElementsByClassName('pagination-sm');
element.onclick = createLinks;
document.onload = createLinks;
function createLinks() {
    var links = document.querySelectorAll("a[href*='/Field/POPendingCreate/']");
    for (var J = links.length-1; J >= 0; --J) {
        var thisLink = links[J];
        console.log(thisLink.href);
        var ppon = thisLink.href.match(/\d+/)[0];
        console.log(ppon);
        var a = document.createElement('a');
        var linkText = document.createTextNode("Preview Order");
        a.appendChild(linkText);
        a.title = "Preview Order";
        a.href = "https://website.com/Field/DownloadPendingPO?POPPKeyID=" + ppon + "&co=1&po=" + ppon;
        a.target = "_blank";
        var parentNode = thisLink.parentNode;
        console.log(parentNode);
        parentNode.appendChild(a);
    }
}

UL元素看起来像这样：

I've provided the translation for your code as requested. If you need any further assistance, please let me know.
<details>
<summary>英文:</summary>
I&#39;m trying to write a Tampermonkey script to extend a business web app I use. In a very basic sense, certain URL&#39;s appear on the page, I need to extract a number from the URL then use than number to build a new link and append to the parent element.
So far I have this but it&#39;s not working when I click on the element (pagination just an UL) or on document load. I know the function works as when I set it to run on clicking anywhere in the document it works. It&#39;s almost like the page isn&#39;t fully loaded when JS reports it is loaded.

//get the pagination element
var element = document.getElementsByClassName('pagination-sm');
element.onclick = createLinks;
document.onload = createLinks;
function createLinks() {
var links = document.querySelectorAll ("a[href*='/Field/POPendingCreate/']");
    for (var J = links.length-1; J >= 0; --J) {
        var thisLink = links[J];
        console.log(thisLink.href);
        var ppon = thisLink.href.match(/\d+/)[0];
        console.log(ppon);
        var a = document.createElement('a');
        var linkText = document.createTextNode("Preview Order");
        a.appendChild(linkText);
        a.title = "Preview Order";
        a.href = "https://website.com/Field/DownloadPendingPO?POPPKeyID=" + ppon + "&co=1&po=" + ppon;
        a.target = "_blank";
        var parentNode = thisLink.parentNode;
        console.log(parentNode);
        parentNode.appendChild(a);
    }
}

The UL element just looks like this:

As I said above the function works as expected when I set it to run on clicking anywhere on the document. More puzzling to me is that it doesn't work when using document.onload. It's like the page only starts loading data in once I start interacting with it. The reason why I'm trying to have the function run when clicking on the pagination is because the page appears to get all the data and store it somewhere (I can't see) then just flicks through the pages when paginating. So once the pagination is clicked I really need to run the function on the links that are generated on the new page.
Seems like I need to delay running document.onload or some other way of knowing once the document data has loaded and also work out why it won't run when clicking on the UL pagination element?
</details>
# 答案1
**得分**: 2
以下是您要翻译的内容：
"Instead of waiting for the page to render and then looping through all the elements to attach an anchor tag. Just use a MutationObserver to handle any elements that get rendered after you have run your logic.
**JS**
```js
(function() {
	'use strict';
	const createLinks = function ( nodeElement ){
		const queryElem = nodeElement.parentElement || nodeElement;
		const links = queryElem.querySelectorAll("a[href*='/Field/POPendingCreate/']");
		for ( const link of links || [] ){
			// Skip link if Preview has been attached
			if ( link.createLinkReady ) continue;
			// Get numbers from link href
			const [ ppon ] = link.href.match(/\d+/);
			// Create an anchor tag
			const a = document.createElement('a');
			a.innerHTML = 'Preview Order';
			a.setAttribute( 'title', 'Preview Order' );
			a.setAttribute( 'href', `https://website.com/Field/DownloadPendingPO?POPPKeyID=${ppon}&co=1&po=${ppon}` );
			a.setAttribute( 'target', '_blank' );
			a.setAttribute( 'rel', 'nofollow' );
			// Append anchor tag to parent element
			link.parentElement.appendChild( a );
			link.createLinkReady = true;
		}
	}
	// Create DOM MutationObserver
	const Observer = new MutationObserver( function( mutationsList ) {
		// Loop through mutations
		for ( const mutation of mutationsList || [] ) {
			// Loop through added nodes
			for ( const node of mutation.addedNodes || [] ){
				// Run createLinks on node
				createLinks( node );
			}
		}
	});
	// Observe DOM for new elements starting from document.body
	Observer.observe( document.body, { childList:true, subtree:true } );
	// Process links that have been rendered
	createLinks( document.body );
})();