Agregando elementos al DOM con javascript

Para adicionar elementos al DOM primero debemos obtener referencia a un elemento para poder determinar dónde será adicionado el nuevo elemento, con esto queremos decir si será adicionado antes, dentro o después del elemento.

• Agregar el nuevo elemento antes del elemento seleccionado preppend
  Con el botón "Preppend button" llamamos a la función agregarBotonAntesDeElemento(idElemento); definida en el archivo agregando-elementos-al-dom.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divManipulado" y agrega un nuevo elemento de tipo "button" posicionándolo al principio del elemento seleccionado.
• Agregar el nuevo elemento después del elemento seleccionado Append
  Con el botón "Append span" llamamos a la función agregarSpanDespuesDelElemento(idElemento); definida en el archivo agregando-elementos-al-dom.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divManipulado" y agrega un nuevo elemento de tipo "span" posicionándolo al final del elemento seleccionado.
  Con el botón "Append alert" llamamos a la función agregarAlertDespuesDelElemento(idElemento); definida en el archivo agregando-elementos-al-dom.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divManipulado" y agrega un nuevo elemento de tipo "div" con los estilos de alerta de bootstrap y lo posiciona al final del elemento seleccionado.

Para editar el contenido de un elemento del DOM primero debemos obtener referencia a dicho elemento y luego javascript provee de mecanismos para alcanzar este objetivo.
Una de las propiedades que expone javascript de los objetos del DOM es innerText y otra de las propiedades que veremos a continuación es innerHTML

• innerText
  Con el botón "Usar InnerText" llamamos a la función agregarInnerText(idElemento, texto); definida en el archivo agregando-elementos-al-dom.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divInnerText" y asigna un nuevo valor a la propiedad innerText del elemento. Esto hará que dentro del div se adicione el contenido asignado como texto.
• innerHtml
  Con el botón "Usar innerHTML" llamamos a la función agregarInnerHTML(idElemento, html); definida en el archivo agregando-elementos-al-dom.js. Si se mira en detalle a esta función, lo que hace es acceder al elemento con id "divInnerHtml" y asigna un nuevo valor a la propiedad innerHTML del elemento. Esto hará que dentro del div se adicione el contenido asignado como html dentro del elemento.
  El tercer botón que tenemos "Usar innerText para agregar html" expone que si se trata de asignar html a través la propiedad innerText, éste no se comportará como html, sino como texto.