2011-12-27 37 views
26

Tengo dos DIV llamadas DIV1 y DIV2 y DIV1 consiste en contenido dinámico y DIV2 está vacío. Necesito que el contenido de DIV1 se muestre en DIV2. Cómo puedo hacerlo.Obtener contenido de un DIV usando JavaScript

He codificado por debajo de manera que no está funcionando. Alguien por favor corrige.

<script type="text/javascript"> 

    var MyDiv1 = Document.getElementById('DIV1'); 
    var MyDiv2 = Document.getElementById('Div2'); 
    MyDiv2.innerHTML = MyDiv2; 

</script> 
<body> 
<div id="DIV1"> 
// Some content goes here. 
</div> 

<div id="DIV2"> 
</div> 
</body> 

Respuesta

61

(1) Su etiqueta <script> se debe colocar antes la etiqueta de cierre </body>. Su JavaScript está tratando de manipular elementos HTML que aún no han sido cargados en el DOM.
(2) Su asignación de contenido HTML parece confusa.
(3) Sea consistente con el caso en su ID de elemento, es decir, 'DIV2' vs
(4) minúsculas del usuario Div2 'para el objeto 'documento'(crédito: ThatOtherPerson)

<body> 
<div id="DIV1"> 
// Some content goes here. 
</div> 

<div id="DIV2"> 
</div> 
<script type="text/javascript"> 

    var MyDiv1 = document.getElementById('DIV1'); 
    var MyDiv2 = document.getElementById('DIV2'); 
    MyDiv2.innerHTML = MyDiv1.innerHTML; 

</script> 
</body> 
+0

Si está utilizando uno de los marcos de JavaScript entonces el orden no importa. Por ejemplo, puede decirle a JQuery que espere hasta que los contenidos se carguen usando $ (documento). Listo, Angular le permite escribir el código usando promesas. No es una buena práctica rociar JS en un archivo, pero ponerlo en archivos cargados por el navegador significa que tienes que esperar. Personalmente creo que la extraña pieza de JS aquí y allá, particularmente cuando estás en desarrollo, no es gran cosa. – Ghoti

+0

¡Muchas gracias por señalar # 1! – LinusGeffarth

4

Ahora está configurando el innerHTML a un elemento div completo; desea configurarlo solo en el HTML interno. Además, creo que quieres MyDiv2.innerHTML = MyDiv .innerHTML. Además, creo que el argumento de document.getElementById distingue entre mayúsculas y minúsculas. Estabas pasando Div2 cuando se quería DIV2

var MyDiv1 = Document.getElementById('DIV1'); 
var MyDiv2 = Document.getElementById('DIV2'); 
MyDiv2.innerHTML = MyDiv1.innerHTML; 

Además, este código se ejecutará antes de DOM está listo. Usted puede poner este script en la parte inferior de su cuerpo como Paislee dijo, o ponerlo en función onload del cuerpo

<body onload="loadFunction()"> 

y luego

function loadFunction(){ 
    var MyDiv1 = Document.getElementById('DIV1'); 
    var MyDiv2 = Document.getElementById('DIV2'); 
    MyDiv2.innerHTML = MyDiv1.innerHTML; 
} 
3

Es necesario para establecer Div2 a HTML interno de Div1. Además, JavaScript distingue entre mayúsculas y minúsculas: en su HTML, la identificación Div2 es DIV2. También, se debe utilizar document, no Document:

var MyDiv1 = document.getElementById('DIV1'); 
var MyDiv2 = document.getElementById('DIV2'); 
MyDiv2.innerHTML = MyDiv1.innerHTML; 

Aquí es una jsFiddle: http://jsfiddle.net/gFN6r/.

1

simplemente puede usar el plugin jquery para obtener/establecer el contenido del div.

var divContent = $ ('#' DIV1) .html(); $ ('#' DIV2) .html (divContent);

para esto necesita incluir la biblioteca jquery.

+5

La pregunta no era sobre jquery. –

2

función add_more() {

var text_count = document.getElementById('text_count').value; 
var div_cmp = document.getElementById('div_cmp'); 
var values = div_cmp.innnerHTML; 
var count = parseInt(text_count); 
divContent = ''; 

for (i = 1; i <= count; i++) { 

    var cmp_text = document.getElementById('cmp_name_' + i).value; 
    var cmp_textarea = document.getElementById('cmp_remark_' + i).value; 
    divContent += '<div id="div_cmp_' + i + '">' + 
     '<input type="text" align="top" name="cmp_name[]" id="cmp_name_' + i + '" value="' + cmp_text + '" >' + 
     '<textarea rows="1" cols="20" name="cmp_remark[]" id="cmp_remark_' + i + '">' + cmp_textarea + '</textarea>' + 
     '</div>'; 
} 

var newCount = count + 1; 

if (document.getElementById('div_cmp_' + newCount) == null) { 
    var newText = '<div id="div_cmp_' + newCount + '">' + 
     '<input type="text" align="top" name="cmp_name[]" id="cmp_name_' + newCount + '" value="" >' + 
     '<textarea rows="1" cols="20" name="cmp_remark[]" id="cmp_remark_' + newCount + '" ></textarea>' + 
     '</div>'; 
    //content = div_cmp.innerHTML; 
    div_cmp.innerHTML = divContent + newText; 
} else { 
    document.getElementById('div_cmp_' + newCount).innerHTML = '<input type="text" align="top" name="cmp_name[]" id="cmp_name_' + newCount + '" value="" >' + 
     '<textarea rows="1" cols="20" name="cmp_remark[]" id="cmp_remark_' + newCount + '" ></textarea>'; 
} 

document.getElementById('text_count').value = newCount; 

} 
Cuestiones relacionadas