Criando Elementos dentro de outros Elementos

[jsmoraes]

nota: ChildNodes - Get a collection of the <tag> element's child nodes

Exemplo com lista:

Example explained: First create a LI node, then create a Text node, then append the Text node to the LI node.
Finally insert the LI node before the first child node in the list.

• Coffee
• Tea

Click the button to insert an item to the list.

Try it

Exemplo com acréscimo de um DIV dentro de outro DIV

A Nabble não permite acesso direto ao body, com a instrução document.body.insertBefore.
A declaração de style pode ser feita no momento da criação do objeto ou após, através do ID (este tem que ser declarado no momento da criação para ser resgatado depois pela instrução document.getElementById
nota: é possível criar um DIV (ou qualquer element) independente e "fora" de outro utilizando do recurso de um parágrafo tag P com id definido. O elemento será inserido dentro deste parágrafo.

Este texto está em um div com borda e largura total da página

Div dentro de Div  Div dentro de paráfrafo

Removendo um elemento criado

Removendo Div dentro de Div

Código Fonte:

// Elemento dentro de uma lista

<nabble_embed>
<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<p>Click the button to insert an item to the list.</p>

<button onclick="myFunction()">Try it</button>
</nabble_embed>

// Div dentro de parágrafo e dentro de Div
<nabble_embed><p id="myteste"><p><p><div id="id1" style="border:blue 1px solid">The text above has been created dynamically.</div>
<p><button onclick="addElement()">Div dentro de Div</button>&nbsp;&nbsp;<button onclick="addElement1()">Div dentro de paráfrafo</button></nabble_embed>

// Removendo elemento dentro de elemento

<nabble_embed><button onclick="removeElement()">Removendo Div dentro de Div</button></nabble_embed>

<script>
function myFunction() {
    var newItem = document.createElement("LI");
    var textnode = document.createTextNode("Water");
    newItem.appendChild(textnode);

    var list = document.getElementById("myList");
    list.insertBefore(newItem, list.childNodes[0]);
}
function addElement(){
var newItem = document.createElement("DIV");
newItem.style.backgroundColor="rgb(220,220,125)";
newItem.id ="div_interno";
newItem.style.width="350px";

var textnode = document.createTextNode("texto do novo div dentro de div com largura menor");
newItem.appendChild(textnode);
var currentTarget = document.getElementById("id1");
currentTarget.insertBefore(newItem,currentTarget.childNodes[0]);

var novoDiv=document.getElementById("div_interno");
novoDiv.style.color="blue";

}
function addElement1(){
var newItem = document.createElement("DIV");
newItem.style.backgroundColor="gray";
newItem.id ="div_inpara";
newItem.style.width="450px";

var textnode = document.createTextNode("texto do novo div dentro de parágrafo e largura de 450px");
newItem.appendChild(textnode);
var currentTarget = document.getElementById("myteste");
currentTarget.insertBefore(newItem,currentTarget.childNodes[0]);

var novoDiv=document.getElementById("div_inpara");
novoDiv.style.color="white";
}
function removeElement() {
  var d = document.getElementById('id1');
  var olddiv = document.getElementById('div_interno');
  d.removeChild(olddiv);
}
</script>