Question

我一直在研究一种干净的方式来将DIV添加到页面并动态添加一行文本。然而，我遇到的大部分内容都已经在页面中处理了现有的DIV，并且没有完全创建新的DIV。

我对JQuery并不是很熟悉，但是我到了那里尝试了这段代码，但由于某些原因没有得到预期的结果，有人可以告诉我我做错了吗？

var theResponse = prompt('Which Group?');
//alert(theResponse);
var groupDiv = $('#groupDiv');
$('body').append(groupDiv);
$('#groupDiv').css({"marginLeft":"10px", "marginTop":"10px"});
$('#groupDiv').append("Group: "+theResponse);
$('#groupDiv').show();
switch (theResponse) 
{
    case "1":
    //alert("case 1");
        break;
    case "2":
    //alert("case 2");
        break;
    case "3":
    //alert("case 3");
        break;
    default:
    //alert("default");
        //
}

我希望它不是一些愚蠢的新手错误，但任何帮助都表示赞赏。我正在使用GreaseMonkey和TamperMonkey运行它，所有代码都工作正常（这意味着除了第一个DIV创建之外的所有代码）。

Answer 1

我认为这回答了你的问题：

var theResponse = prompt('Which Group?');
$('body').append('<div id="groupDiv"></div>');
$("#groupDiv").css({"marginLeft":"10px", "marginTop":"10px"});
$('#groupDiv').text("Group: " + theResponse);

Fiddle

Answer 2

执行此操作时：

var groupDiv = $('#groupDiv');

你得到一个id为groupDiv的现有元素。如果将其附加到某处，则将其从之前的位置删除。如果要克隆它（重复），请使用：

var groupDiv = $('#groupDiv').clone();

如果您想从头开始创建，请使用：

var groupDiv = $('<div class="groupDiv"></div>');

您还可以一次性添加所有参数：

var groupDiv = 
    $('<div class="groupDiv" style="marginLeft:10px, marginTop:10px">Group: ' +
    theResponse + '</div>');

然后像你一样加入身体：

$('body').append(groupDiv);

如果没有隐藏，或者它没有show()样式，则不需要display:none。

JQuery - 动态添加新的DIV元素

2 个答案:

Fiddle