Получить контент DIV с помощью JavaScript

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

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

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

Ответы

Ответ 1

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

Ответ 2

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

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

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

<body onload="loadFunction()">

а затем

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

Ответ 3

Вам нужно установить Div2 в Div1 innerHTML. Кроме того, 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/.

Ответ 4

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

}

Ответ 5

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

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

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