JavaScript創建div元素和添加內容

-1

我想創建一個div元素並向其中添加少量內容，並且一旦添加了所有內容，就需要顯示div元素的內容。使用JavaScript創建div元素和添加內容

林下面的代碼，並出於某些原因的div元素不被顯示在HTML ...

js代碼

container = $("<div/>", { "class": "container" }); 
$(".container").append("<b>Appended text</b>"); 
$(".container").append("<b>Appended text</b>"); 
$(".container").append("<b>Appended text</b>"); 
$(".container").append("<b>Appended text</b>"); 
$(".container").append("<b>Appended text</b>");

CSS代碼：

.container{ 
    height:100px; 
    width:100px; 
    background-color:black; 
}

來源

2013-12-20 user1050619

如果你使用jQuery（你似乎是），請標記問題'jquery'。 –

由於某些原因的div元素不被顯示在HTML ...

那是因爲你從來沒有在DOM把container任何地方。您已創建該元素，但未將其添加到任何位置的頁面。

將其添加到您想要的頁面。例如，這也增加了body元素：

container.appendTo(document.body);

...但你可能有你希望它是一些其他特定場所。

另外請注意，你的小提琴不工作，因爲你沒有包含jQuery，所以$是一個未定義的符號。

這裏有一個小提琴是包括jQuery的，並添加元素的DOM：http://jsfiddle.net/KVe9K/1/

如果你的意思是，爲什麼不是你append電話的工作，這是因爲該元素是不但DOM尚未與.container選擇器匹配。你可以這樣做，雖然：

container = $("<div/>", { "class": "container" }); 
container.append("<b>Appended text</b>"); 
container.append("<b>Appended text</b>"); 
container.append("<b>Appended text</b>"); 
container.append("<b>Appended text</b>"); 
container.append("<b>Appended text</b>"); 
container.appendTo(document.body); // Or whereever

Further updated fiddle

來源

2013-12-20 22:34:25

@TJ：謝謝..你的迴應中唯一缺少的是如何獲得div元素的內容......我現在編輯問題 – user1050619

@ user1050619：這不是問題的問題。不要編輯一個問題來詢問完全不同的問題，至少在你回答問題的時候至少不要問你的問題。 –

@ user1050619：...但是我已經根據你想要顯示它的語句更新了答案* *文本被添加後。 –

container = $("<div/>", { "class": "container" });

這好像不增加股利的DOM元素。

來源

2013-12-20 22:34:58

JavaScript創建div元素和添加內容

回答

相關問題