Recomendado instalar:
firebug
webdeveloper
wappalyzer
Developer Mozilla --> document create element.
var element = document.createElement(tagname);
https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
___________________________________________________________________________
<!DOCTYPE html>
<body>
<header>
<h1>1 Title</h1>
<nav><ul>
</ul></nav>
</header>
<section id='content'>
<article class='blog-post'>
<h1>2 Blog Post</h1>
</article>
</section>
<script>
var nodeInfo = document.createElement("p"); //create a <p> node
var nodeText = document.createTextNode("info"); // text node
nodeInfo.appendChild(nodeText);// append the text node to the p node
//(the text node becomes child of the p node)
document.body.appendChild(nodeInfo); // append the p node to the body node
//(the p node becomes child of the body node)
//var esteElemento = document.getElementById("content");
//document.body.insertBefore(nodeInfo, esteElemento);
</script>
<br>
3 Aqui sigue la pagina
<script>
nodeInfo.appendChild(nodeText);// append the text node to the p node
//(the text node becomes child of the p node)
document.body.appendChild(nodeInfo); // append the p node to the body node
//(the p node becomes child of the body node)
//var esteElemento = document.getElementById("content");
//document.body.insertBefore(nodeInfo, esteElemento);
</script>
</body>
</html>
_________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
</head>
<script>
var my_div = null;
var newDiv = null;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
</script>
<body onload="addElement()">
<div id='org_div1'> The text above has been created dynamically.</div>
<div id='org_div1'> The text above has been created dynamically.</div>
<div id='org_div1'> The text above has been created dynamically.</div>
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
</head>
<script>
var my_div = null;
var newDiv = null;
var coche=0;
var avion=0;
var barco=0;
function agregarcoche() {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Coche nuevo numero" + coche++);
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_divc");
document.body.insertBefore(newDiv, my_div);
}
function agregaravion() {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Avion nuevo numero" + avion++);
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_diva");
document.body.insertBefore(newDiv, my_div);
}
function agregarbarco() {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Barco nuevo numero" + barco++);
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_divb");
document.body.insertBefore(newDiv, my_div);
}
</script>
<body onload="addElement()">
<button onclick="agregarcoche()">+coche</button>
<div id='org_divc'> Estos son los coches creados.</div>
<button onclick="agregaravion()">+avion</button>
<div id='org_diva'> Estos son los aviones creados.</div>
<button onclick="agregarbarco()">+barco</button>
<div id='org_divb'> Estos son los barcos creados.</div>
</body>
</html>
firebug
webdeveloper
wappalyzer
Developer Mozilla --> document create element.
var element = document.createElement(tagname);
https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
___________________________________________________________________________
<!DOCTYPE html>
<body>
<header>
<h1>1 Title</h1>
<nav><ul>
</ul></nav>
</header>
<section id='content'>
<article class='blog-post'>
<h1>2 Blog Post</h1>
</article>
</section>
<script>
var nodeInfo = document.createElement("p"); //create a <p> node
var nodeText = document.createTextNode("info"); // text node
nodeInfo.appendChild(nodeText);// append the text node to the p node
//(the text node becomes child of the p node)
document.body.appendChild(nodeInfo); // append the p node to the body node
//(the p node becomes child of the body node)
//var esteElemento = document.getElementById("content");
//document.body.insertBefore(nodeInfo, esteElemento);
</script>
<br>
3 Aqui sigue la pagina
<script>
nodeInfo.appendChild(nodeText);// append the text node to the p node
//(the text node becomes child of the p node)
document.body.appendChild(nodeInfo); // append the p node to the body node
//(the p node becomes child of the body node)
//var esteElemento = document.getElementById("content");
//document.body.insertBefore(nodeInfo, esteElemento);
</script>
</body>
</html>
_________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
</head>
<script>
var my_div = null;
var newDiv = null;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
</script>
<body onload="addElement()">
<div id='org_div1'> The text above has been created dynamically.</div>
<div id='org_div1'> The text above has been created dynamically.</div>
<div id='org_div1'> The text above has been created dynamically.</div>
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
</head>
<script>
var my_div = null;
var newDiv = null;
var coche=0;
var avion=0;
var barco=0;
function agregarcoche() {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Coche nuevo numero" + coche++);
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_divc");
document.body.insertBefore(newDiv, my_div);
}
function agregaravion() {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Avion nuevo numero" + avion++);
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_diva");
document.body.insertBefore(newDiv, my_div);
}
function agregarbarco() {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Barco nuevo numero" + barco++);
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_divb");
document.body.insertBefore(newDiv, my_div);
}
</script>
<body onload="addElement()">
<button onclick="agregarcoche()">+coche</button>
<div id='org_divc'> Estos son los coches creados.</div>
<button onclick="agregaravion()">+avion</button>
<div id='org_diva'> Estos son los aviones creados.</div>
<button onclick="agregarbarco()">+barco</button>
<div id='org_divb'> Estos son los barcos creados.</div>
</body>
</html>
No hay comentarios:
Publicar un comentario