how can I reduce this line of code in javascript? [closed]

2

I have a file like this:

<html>
<script>
  var a = document.createElement('script');
  a.src = 'js/index.js';
  document.getElementsByTagName('html')[0].appendChild(a);
</script>
</html>

I have a folder called js, in this folder I have 8 files with the .js extension. These files have very similar and similar code lines ... So I did it in alphabetical order and also to facilitate your code visualization and analysis.

I started from letter "a" to letter "g". Except for the last file, whose name I put: "index.js". As you can see below:

a.js

var j = document.createAttribute("id"); 
j.value = "ty";
var k = document.getElementsByTagName("ty")[0]; 
k.setAttributeNode(j); 

b.js

var h = document.createAttribute("id"); 
h.value = "rty";
var i = document.getElementsByTagName("rty")[0];
i.setAttributeNode(h);

c.js

var g = document.createAttribute("id"); 
g.value = "avs";
var h = document.getElementsByTagName("avs")[0];
h.setAttributeNode(g); 

d.js

var a = document.createElement('avs');
document.write('<avs></avs>');
document.getElementsByTagName('html')[0].appendChild(a);

e.js

var c = document.createElement('ty');
document.write('<ty></ty>'); 
document.getElementsByTagName('html')[0].append(c);

f.js

var b = document.createElement('rty'); 
document.write('<rty></rty>'); 
document.getElementsByTagName('html')[0].appendChild(b);

g.js

var k = document.body;
k.parentNode.removeChild(k);
var l = document.head; 
l.parentNode.removeChild(l);    

And finally index.js:

var a = document.createElement('script'); 
a.src = 'js/d.js';
document.getElementsByTagName('script')[0].appendChild(a);
var b = document.createElement('script'); 
b.src = 'js/e.js';
document.getElementsByTagName('script')[0].appendChild(b);
var c = document.createElement('script'); 
c.src = 'js/f.js';
document.getElementsByTagName('script')[0].appendChild(c);
var d = document.createElement('script'); 
d.src = 'js/c.js';
document.getElementsByTagName('script')[0].appendChild(d);
var e = document.createElement('script'); 
e.src = 'js/b.js';
document.getElementsByTagName('script')[0].appendChild(e);
var f = document.createElement('script'); 
f.src = 'js/a.js';
document.getElementsByTagName('script')[0].appendChild(f);
var g = document.createElement('script'); 
g.src = 'js/g.js';
document.getElementsByTagName('script')[0].appendChild(g);
var h = document.createElement("link"); 
h.setAttribute("rel", "stylesheet");
h.setAttribute("src", "css/style.css"); 
document.getElementsByTagName('html')[0].appendChild(h);

So ... how can I reduce these lines of code, for something simpler?

    
asked by anonymous 12.05.2017 / 05:27

1 answer

0

I do not know exactly why this code, just looking it can not understand what you intend to do by creating elements in the DOM that do not exist in HTML itself.

I think that before answering your question, I would like you to explain what problem you are trying to solve and then give you an answer or an idea.

Some things I can outline are:

  • Do not create files and generic names (a, b, c, etc.), it is almost impossible to decipher what the code means. Example:

    //Criando uma variável idade
    //má prática
    var i = 20;
    
    //boa prática
    var idade = 20;
    
  • Document.write reloads the DOM, and this can be a very bad thing

  • When you have a solution that will repeat itself several times, the good practice is to create a function that receives the variables and calls it several times.

Finally, better detail what you want to do to be able to help you with this!

    
12.05.2017 / 12:00