如何获取Ajax动态更新的指定p标签内容并传递至URL参数？

Got it, let's work through this problem together. First off, I spotted a tiny typo in your <p> tag—id1 isn't a valid HTML ID attribute, you'll want to change that to id="p-1-1" so JavaScript can target it properly. With that fixed, here are two solid ways to dynamically update the param value in your link whenever the <p> content changes (even after Ajax loads):

Method 1: Use MutationObserver to Watch for Content Changes #

This approach automatically detects when the <p> tag's content updates (including after Ajax finishes loading) and updates the link's param in real time. Perfect if you don't have control over when the Ajax request completes.

// Grab the target elements
const targetPara = document.getElementById('p-1-1');
const targetLink = document.querySelector('.btn2');

// Set up an observer to watch for content changes
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    // Get the current text content, trimming extra whitespace
    const paraContent = targetPara.textContent.trim();
    if (paraContent) {
      // Parse the link's URL safely
      const url = new URL(targetLink.href);
      // Update the 'param' query parameter
      url.searchParams.set('param', paraContent);
      // Assign the updated URL back to the link
      targetLink.href = url.toString();
    }
  });
});

// Configure the observer to watch for text/content changes
observer.observe(targetPara, {
  childList: true,
  subtree: true,
  characterData: true
});

// Initialize the link with the initial <p> content on page load
const initialContent = targetPara.textContent.trim();
if (initialContent) {
  const url = new URL(targetLink.href);
  url.searchParams.set('param', initialContent);
  targetLink.href = url.toString();
}

Method 2: Trigger Update Manually After Ajax Completes #

If you know exactly when your Ajax request finishes (like having access to a callback function), you can call an update function directly at that point—it's more efficient than constant observation.

// Create a reusable function to update the link's param
function updateLinkParam() {
  const targetPara = document.getElementById('p-1-1');
  const targetLink = document.querySelector('.btn2');
  const paraContent = targetPara.textContent.trim();
  
  if (paraContent) {
    const url = new URL(targetLink.href);
    url.searchParams.set('param', paraContent);
    targetLink.href = url.toString();
  }
}

// Set the initial value when the page loads
updateLinkParam();

// Call the update function right after your Ajax request finishes
// Example (adjust this to match your actual Ajax code):
fetch('/your-ajax-endpoint')
  .then(response => response.text())
  .then(data => {
    // Update the <p> tag with the new Ajax data
    targetPara.textContent = data;
    // Refresh the link's param
    updateLinkParam();
  });

Quick Notes #

• Using URL and URLSearchParams is way safer than manually string-building the URL—it automatically handles special character encoding so you don't run into broken links.
• If your <p> tag contains HTML elements (not just plain text), use innerText instead of textContent to grab only the visible text.

内容的提问来源于stack exchange，提问作者Vlad