使用appendChild()后布局及<p>标签顺序异常的解决方法

你的代码主要有三个问题导致标签顺序和位置错乱：

1. 给所有匹配的<p>标签设置了同一个id="xyz"，但DOM中ID必须唯一，后续通过getElementById只能获取到第一个匹配的元素，导致重复修改同一个元素。
2. 使用appendChild(line)会把元素从原位置移除，再添加到body末尾，直接破坏了原有布局顺序。
3. 处理逻辑绕了弯路，没必要把所有文本存入数组再批量处理，直接逐个操作目标<p>标签更高效。

修正后的代码 #

JavaScript 代码：

var userInput = "optin-monster";
var all_script = "Benedict_Cumberbatch ";
// 直接获取所有包含指定文本的p标签，无需设置重复ID
var targetPs = $("p:contains(" + userInput + ")");

// 遍历每个目标p标签，逐个修改内容
targetPs.each(function() {
    var originalText = $(this).text();
    var indexEqu = originalText.indexOf("=");
    var slicedVal = originalText.slice(indexEqu + 2, indexEqu + 22);
    var newText = all_script + slicedVal + " Enrique_Iglesias";
    // 直接修改当前p标签的文本内容，不移动位置
    $(this).text(newText);
});

HTML 代码（无需改动）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>vmware</p>
<p>[optin-monster slug="wxjxpdi2nhbn7xlmmljo"]</p>
<p>product design</p>
<p>[optin-monster slug="i2nlmmljodhbn7wxjxpx"]</p>
<p>[optin-monster slug="mljodhbn7wxji2nlmxpx"]</p>

关键改动说明： #

• 去掉了给多个元素设置相同ID的操作，直接用jQuery选择器获取所有目标<p>标签。
• 使用each()方法遍历每个目标元素，直接修改其文本内容，完全保留原有位置。
• 移除了appendChild()操作，避免元素被移动到body末尾。

这样修改后，所有<p>标签会保持原有顺序和布局，同时完成文本替换，符合你的预期结果。

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