能否将jQuery代码中的固定选择器$('#1')替换为变量ID以动态添加元素？

Absolutely! Swapping that hardcoded $('#1') selector for a custom variable is not only possible—it’s a great practice for making your dynamic element logic more flexible and maintainable. Here are a few straightforward ways to pull this off, depending on how you’re defining your target element:

1. Use a dynamic ID string variable #

If your variable holds the ID of the target element (as a string), you can concatenate it with the # selector syntax to target the element:

// Define your dynamic ID (this could come from user input, data attributes, API response, etc.)
const targetElementId = 'user-selected-element'; 

$("#addPrev").one("click", function() {
  // Use the variable to build your selector
  $('#' + targetElementId).before(prevElement);
});

For slightly better performance, you can also use native DOM selection first, then wrap it in jQuery:

const targetElementId = 'user-selected-element'; 
const targetElement = document.getElementById(targetElementId);

$("#addPrev").one("click", function() {
  $(targetElement).before(prevElement);
});

2. Use a pre-fetched jQuery/DOM element variable #

If you’ve already retrieved the target element earlier in your code (e.g., based on user interaction or dynamic generation), you can store it directly as a variable and reuse it:

// Fetch the target element once (maybe when your app initializes or a user selects it)
const $targetElement = $('#some-dynamically-created-element'); 

$("#addPrev").one("click", function() {
  // No need to re-select—just use the pre-fetched variable
  $targetElement.before(prevElement);
});

Pro Tip: Add a safety check #

Since you’re dealing with dynamic elements, it’s smart to verify the target element exists before trying to modify it. This prevents errors if the element isn’t loaded or has been removed:

const targetElementId = 'user-selected-element'; 

$("#addPrev").one("click", function() {
  const $target = $('#' + targetElementId);
  
  if ($target.length) {
    $target.before(prevElement);
  } else {
    console.warn('Target element not found—double-check the ID or element availability!');
  }
});

These patterns work seamlessly with dynamic element addition workflows, whether you’re targeting user-selected elements, dynamically generated IDs, or elements created earlier in your app’s lifecycle.

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