obtener - Javascript: agrega HTML al elemento contenedor sin innerHTML

obtener contenido de un div javascript

Question

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 al reemplazar todo el html primero antes de agregar el html antiguo más el nuevo html. Esto no es bueno porque restablece medios dinámicos como videos incrustados flash ...

Podría hacerlo de esta manera 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 span extra en el documento que no quiero.

¿Cómo puede hacerse esto entonces? ¡Gracias!

Answer 1

Usando jQuery:

$("#element-id").append(htmlData);

• element-id : el ID del elemento principal donde desea agregar su html.
• htmlData : El nuevo código HTML que desea agregar al elemento padre anterior.

HTML inicial:

<div id="element-id">
   <p>Hello World!</p>
</div>

JS:

$("#element-id").append("<p>This''s the new HTML.</p>");

HTML después de ejecutar JS:

<div id="element-id">
   <p>Hello World!</p>
   <p>This''s the new HTML.</p>
</div>

Answer 2

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>

Espero que esto sea útil para otros.

Answer 3

Esto es para lo que se diseñó DocumentFragment .

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

Answer 4

Me sorprende que ninguna de las respuestas menciona el método insertAdjacentHTML() . Compruébalo here . El primer parámetro es donde desea que se adjunte y tome la cadena ("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>'');

Answer 5

Para dar una alternativa (ya que el uso de DocumentFragment no parece funcionar): Puede simularlo iterando sobre los elementos secundarios del nodo recién generado y solo anexarlos.

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

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

Answer 6

element.innerHTML *+=* htmldata - nope

try - element.innerHTML **=+** htmldata si no quieres reemplazar nada, solo agrega datos nuevos.

Answer 7

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

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

asigna los datos para div con el símbolo "+ =", puedes anexar datos incluyendo datos html previos