2011-12-27 5 views
26

У меня есть два DIV, называемые DIV1 и DIV2, а DIV1 состоит из динамического содержимого, а DIV2 пуст. Мне нужно, чтобы содержимое DIV1 отображалось в DIV2. Как мне это сделать.Получите содержимое DIV с помощью JavaScript

Я закодировал ниже способ, который не работает. Кто-нибудь, пожалуйста, исправьте это.

<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> 

ответ

61

(1) Ваш <script> тег должен быть помещен перед закрывающий </body> тег. Ваш JavaScript пытается манипулировать HTML-элементами, которые еще не загружены в DOM.
(2) Ваше назначение HTML-содержимого выглядит беспорядочным.
(3) Соответствовать случае в вашем элементе ID, то есть 'div2' против
(4) пользователя в нижнем регистре 'div2' для 'документ' объекта (кредит: 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

Если вы используете один из фреймворков, то порядок не имеет значения. Например, вы можете сообщить JQuery, что дождаться загрузки содержимого с помощью $ (document) .ready, Angular позволяет писать код с помощью обещаний. Неправильная практика посыпать JS по всему файлу, но поместить его в файлы, загруженные браузером, значит, вам нужно подождать. Лично я думаю, что странный кусок JS здесь и там, особенно когда вы разрабатываете, не имеет большого значения. – Ghoti

+0

Большое спасибо за указание №1! – LinusGeffarth

4

Прямо сейчас вы устанавливаете innerHTML на весь элемент div; вы хотите установить его только в innerHTML. Кроме того, я думаю, что вы хотите MyDiv2.innerHTML = MyDiv .innerHTML. Кроме того, я думаю, что аргумент document.getElementById чувствителен к регистру. Вы проходили Div2, когда вы хотели DIV2

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

Кроме того, этот код будет работать, прежде чем ваш DOM готов. Вы можете поместить этот скрипт в нижней части тела, как paislee сказал, или положить его в функцию OnLoad вашего тела

<body onload="loadFunction()"> 

, а затем

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

Вам нужно установить Div2 в innerHTML Div1. Кроме того, JavaScript чувствителен к регистру - в вашем HTML код Div2 - DIV2. Кроме того, вы должны использовать document, не Document:

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

Вот JSFiddle: http://jsfiddle.net/gFN6r/.

1

просто вы можете использовать плагин jquery для получения/установки содержимого div.

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

Для этого вам необходимо включить библиотеку jquery.

+5

Вопрос не о jquery. –

2

функция 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; 

} 
Смежные вопросы