Javascript: agregue HTML al elemento contenedor sin innerHTML

Necesito una forma de agregar HTML a un elemento contenedor sin usar innerHTML. La razón por la que no quiero usar innerHTML es porque cuando se usa así:

element.innerHTML += htmldata

Funciona reemplazando todo el html primero antes de agregar el viejo html más el nuevo html. Esto no es bueno porque restablece los medios dinámicos, como los videos flash incrustados ...

Podría hacerlo de esta manera, lo que funciona:

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

Sin embargo, el problema con esa forma es que ahora hay una etiqueta de extensión adicional en el documento que no quiero.

¿Cómo se puede hacer esto entonces? ¡Gracias!

Para dar una alternativa (ya que el uso DocumentFragmentno parece funcionar): puede simularlo iterando sobre los elementos secundarios del nodo recién generado y solo agregue esos.

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}

Me sorprende que ninguna de las respuestas mencionara el insertAdjacentHTML()método. Compruébalo aquí . El primer parámetro es donde desea que se anexe la cadena y tome ("beforebegin", "afterbegin", "beforeend", "afterend"). En la situación del OP, usarías "beforeend". El segundo parámetro es solo la cadena html.

Uso básico:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

Alnafie tiene una gran respuesta para esta pregunta. Quería dar un ejemplo de su código de referencia:

var childNumber = 3;

function addChild() {
  var parent = document.getElementById('i-want-more-children');
  var newChild = '<p>Child ' + childNumber + '</p>';
  parent.insertAdjacentHTML('beforeend', newChild);
  childNumber++;
}

body {
  text-align: center;
}
button {
  background: rgba(7, 99, 53, .1);
  border: 3px solid rgba(7, 99, 53, 1);
  border-radius: 5px;
  color: rgba(7, 99, 53, 1);
  cursor: pointer;
  line-height: 40px;
  font-size: 30px;
  outline: none;
  padding: 0 20px;
  transition: all .3s;
}
button:hover {
  background: rgba(7, 99, 53, 1);
  color: rgba(255,255,255,1);
}
p {
  font-size: 20px;
  font-weight: bold;
}

<button type="button" onclick="addChild()">Append Child</button>
<div id="i-want-more-children">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

Esperemos que esto sea útil para otros.

<div id="Result">
</div>

<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
 document.getElementById('Result').innerHTML += data;
}
</script>

asigne los datos para div con el símbolo "+ =", puede agregar datos, incluidos datos html anteriores

Esto es para lo que DocumentFragmentestaba destinado.

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
    frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);

document.createDocumentFragment, .childNodes

Cómo pescar y al usar un código estricto. Hay dos funciones de requisitos previos necesarias en la parte inferior de esta publicación.

xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

Agregue varios elementos (el espacio de nombres solo debe estar en el elemento principal):

xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');

Código dinámico reutilizable:

function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}