簡體   English   中英

"使用 JavaScript 獲取 DIV 的內容"

[英]Get content of a DIV using JavaScript

我有兩個名為 DIV1 和 DIV2 的 DIV,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) 您的<script>標簽應該放在結束的</body>標簽之前。 您的 JavaScript 正在嘗試操作尚未加載到 DOM 中的 HTML 元素。
(2) 您對 HTML 內容的分配看起來很混亂。
(3) 與您的元素 ID 中的大小寫一致,即 'DIV2' vs '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>

您需要將 Div2 設置為 Div1 的 innerHTML。 此外,JavaScript 區分大小寫 - 在您的 HTML 中,id Div2<\/code>是DIV2<\/code> 。 此外,您應該使用document<\/code> ,而不是Document<\/code> :

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

現在,您正在將 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 准備好之前運行。 你可以像 paislee 說的那樣把這個腳本放在你身體的底部,或者把它放在你身體的 onload 函數中

<body onload="loadFunction()">

接着

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

功能添加更多(){

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;

}

只需您可以使用 jquery 插件來獲取\/設置 div 的內容。

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

為此,您需要包含 jquery 庫。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM