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

Mayuresh Deshmukh 0
Viewed 38

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

jquery javascript html
1 Answers

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}`;
});

// non-es6 version 
/*
  $('p:contains(' + userInput + ')').text(function(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.

Rory McCrossan0
Related