2011-12-27 47 views
26

Tôi có hai DIV được gọi là DIV1 và DIV2 và DIV1 bao gồm nội dung động và DIV2 trống. Tôi cần nội dung của DIV1 để được hiển thị trong DIV2. Tôi làm nó như thế nào.Lấy nội dung của DIV bằng cách sử dụng JavaScript

Tôi được mã hóa theo cách thức không hoạt động. Mọi người hãy sửa nó đi.

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

Trả lời

61

(1) thẻ <script> của bạn sẽ được đặt trước thẻ đóng </body>. JavaScript của bạn đang cố gắng thao tác các phần tử HTML chưa được tải vào DOM.
(2) Việc gán nội dung HTML của bạn sẽ bị xáo trộn.
(3) Hãy nhất quán với các trường hợp trong ID yếu tố của bạn, ví dụ: 'div2' vs
(4) tài chữ thường 'div2' cho đối tượng 'tài liệu' (tín dụng: 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

Nếu bạn đang sử dụng một trong những khuôn khổ JavaScript sau đó thứ tự không quan trọng. Ví dụ bạn có thể yêu cầu JQuery đợi cho đến khi nội dung được nạp bằng cách sử dụng $ (document) .ready, Angular cho phép bạn viết mã bằng cách sử dụng lời hứa. Thực hành không tốt là rắc JS lên trên một tệp, nhưng đặt nó vào các tệp được trình duyệt tải lên nghĩa là bạn phải đợi. Cá nhân tôi nghĩ rằng phần lẻ của JS ở đây và ở đó, đặc biệt là khi bạn đang phát triển, không phải là vấn đề lớn. – Ghoti

+0

Cảm ơn bạn rất nhiều vì đã chỉ ra # 1! – LinusGeffarth

4

Ngay bây giờ bạn đang đặt innerHTML cho toàn bộ phần tử div; bạn muốn đặt nó chỉ là innerHTML. Ngoài ra, tôi nghĩ bạn muốn MyDiv2.innerHTML = MyDiv .innerHTML. Ngoài ra, tôi nghĩ rằng đối số cho document.getElementById phân biệt chữ hoa chữ thường. Bạn đã đi qua Div2 khi bạn muốn DIV2

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

Ngoài ra, mã này sẽ chạy trước khi DOM của bạn đã sẵn sàng. Bạn có thể đưa kịch bản này ở dưới cùng của cơ thể của bạn như paislee nói, hoặc đặt nó trong chức năng onload của cơ thể của bạn

<body onload="loadFunction()"> 

và sau đó

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

Bạn cần để đặt Div2 thành innerHTML của Div1. Ngoài ra, JavaScript phân biệt chữ hoa chữ thường - trong mã HTML của bạn, mã số Div2DIV2. Ngoài ra, bạn nên sử dụng document, không Document:

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

Đây là một JSFiddle: http://jsfiddle.net/gFN6r/.

1

chỉ đơn giản là bạn có thể sử dụng plugin jquery để có được/đặt nội dung của div.

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

cho điều này bạn cần phải bao gồm thư viện jquery.

+5

Câu hỏi không phải là về jquery. –

2

chức năng 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; 

} 
Các vấn đề liên quan