Para poder imprimir el texto una sola vez, debes usar el bucle, si nos fijamos tienes esta linea:
t = document.createTextNode("Push in array: " + i);
Lo que quiere decir, que puedes tener acceso al valor de la variable i
, por lo tanto puedes jugar con un operador ternario, dejando tu codigo asi:
t = document.createTextNode((i == 0 ? "Push in array: ": "") + i);
El operador ternario funciona de la siguiente manera:
((condicion) ? SI : NO)
Si la condicion se cumple, se hara lo que este antes de los dos puntos :
, en caso contrario se hara lo que este despues de ellos.
Asi que lo que hacemos es indicar al codigo, cuando el valor de i
sea 0, imprime "Push in array" al lado del valor de i
, en caso contrario, solo imprime el valor de i.
Nota
Para poder imprimir todos los elementos en una linea, bastaria cambiar esta linea:
c = document.createElement("p");
Por esta:
c = document.createElement("a");
Para que en lugar de crear elementos de tipo <p>
, cree elementos de tipo <a>
, que son solo texto, no son parrafos como las etiquetas <p>
Voila, el ejemplo:
// Re-usable var's
var cc = []; // Main array
var div = document.getElementById('array');
var t = "";
var w = "";
var c = "";
// End
// Add element at first w/ push()
for(let i=0; i<=10; i++) {
cc.push(i);
w = document.getElementById("array");
c = document.createElement("a");
t = document.createTextNode((i == 0 ? "Push in array: ": "") + i);
c.appendChild(t);
w.appendChild(c);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="array"></div>
</body>
</html>