Why my Layout Position changes when i use appendChild() method?

Question

I am changing the text content in <p> tags. While setting the new text content to <p> tags, the sequence of <p> tags is changing. Is there any way to fix the issue?

 var userInput = "optin-monster"; var all_script = "Benedict_Cumberbatch "; var all=$("p:contains(" + userInput + ")").attr('id', 'xyz'); var len_all=$('p').length; var all_array=[]; for (var i=0; i < len_all; i++) { all_array.push($(all[i]).text()); } all_array = all_array.filter(item => item); changed_array=[]; for (var i = 0; i < all_array.length; i++) { var indexEqu=all_array[i].indexOf("="); var slicedVal=all_array[i].slice(indexEqu+2,indexEqu+22); var result = all_array[i].replace(all_array[i],all_script); var out=result+slicedVal+" Enrique_Iglesias"; changed_array.push(out); } for (j= 0, n = changed_array.length; j< n; j++) { var line = document.getElementById("xyz"); line.innerHTML = changed_array[j]; document.body.appendChild(line); }

 <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>

Purpose: The changed paragraph tags should be in there actual positions after getting new text content.

Expected: vmware

Benedict_Cumberbatch wxjxpdi2nhbn7xlmmljo Enrique_Iglesias

product design

Benedict_Cumberbatch i2nlmmljodhbn7wxjxpx Enrique_Iglesias

Benedict_Cumberbatch mljodhbn7wxji2nlmxpx Enrique_Iglesias

Answer 1

From the description of the expected output in the question, your goal is to update the content of the elements in place. As such you don't need to use appendChild() . You can edit the element's content in-place.

In addition, as you've included jQuery in the page already you may as well use it to simplify the logic. You can provide a function to text() which accepts the existing text as an argument, retrieves the slug value from it and returns that with the added prefix/suffix.

To get the slug value you can use a regular expression which you simply concatenate the other string values to:

 let userInput = "optin-monster"; let prefix = "Benedict_Cumberbatch"; let suffix = "Enrique_Iglesias" $(`p:contains(${userInput})`).text((i, t) => { let slug = t.match(/(?:"[^"]*"|^[^"]*$)/)[0].replace(/"/g, ''); return `${prefix} ${slug} ${suffix}`; });

 <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>

Also note that I removed the part of the logic where you set the same id on all the elements. This is invalid as id must be unique. If you need a method of identifying these elements as a group, use a class .