Pobierz zawartość DIV za pomocą JavaScriptu

Mam dwa DIV o nazwie DIV1 i DIV2, a DIV1 zawiera treści dynamiczne, a DIV2 jest puste. Potrzebuję zawartości DIV1 do wyświetlania w DIV2. Jak mogę to zrobić.Pobierz zawartość DIV za pomocą JavaScriptu

Zakodowałem w poniższy sposób, który nie działa. Niech ktoś to poprawi.

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

Źródło

2011-12-27 lock

(1) Twój <script> tag powinien być umieszczony przed zamykający tag </body>. Twój JavaScript próbuje manipulować elementami HTML, które nie zostały jeszcze załadowane do DOM.
(2) Twoje przypisanie treści HTML wygląda na pomieszane.
(3) jest zgodna ze sprawą w swojej id elementu, czyli 'Div2' vs 'Div2'
(4) użytkownika małymi literami dla 'dokument' obiektu (kredyt: 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>

Źródło

2011-12-27 17:11:31 paislee

Jeśli używasz jednej z ram JavaScript wówczas kolejność nie ma znaczenia. Na przykład możesz powiedzieć JQuery, aby zaczekał, aż zawartość zostanie załadowana za pomocą $ (document) .ready, Angular pozwala pisać kod za pomocą obietnic. Nie jest dobrą praktyką rozpylanie JS-a w całym pliku, ale umieszczenie go w plikach ładowanych przez przeglądarkę oznacza, że musisz poczekać. Osobiście uważam, że dziwny kawałek JS tu i tam, zwłaszcza gdy się rozwijasz, to nic wielkiego. – Ghoti

Wielkie dzięki za wskazanie # 1! – LinusGeffarth

Teraz ustawiasz innerHTML na cały element div; chcesz ustawić go tylko innerHTML. Ponadto, myślę, że chcesz MyDiv2.innerHTML = MyDiv .innerHTML. Ponadto, myślę, że w argumencie document.getElementById rozróżniana jest wielkość liter. Ci mijały Div2 kiedy chciał DIV2

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

Również ten kod zostanie uruchomiony zanim DOM jest gotowy. Można też umieścić ten skrypt w dolnej części ciała jak paislee powiedział, lub umieścić go w funkcji onload organizmu

<body onload="loadFunction()">

a następnie

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

Źródło

2011-12-27 17:10:00

Trzeba ustawić wewnętrzny HTML w Div2 na Div1. Również w JavaScript rozróżniana jest wielkość liter - w kodzie HTML identyfikator Div2 to DIV2. Ponadto, należy użyć document, nie Document:

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

Oto JSFiddle: http://jsfiddle.net/gFN6r/.

Źródło

2011-12-27 17:14:26 ThatOtherPerson

po prostu można użyć wtyczki jquery, aby uzyskać/ustawić zawartość div.

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

w tym celu należy dołączyć bibliotekę jquery.

Źródło

2011-12-27 17:27:05

Pytanie nie dotyczyło jquery. –

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

}

Źródło

2013-04-19 10:36:04

Pobierz zawartość DIV za pomocą JavaScriptu

Odpowiedz

Powiązane problemy