我有一个看似简单的问题,但有些问题我无法想出最好的方法。
以下是我的html结构:
<div id="PasswordStrengthBorder" style="position: absolute; display: inline;
height:3px; top: 379px; left: 556px; border-style: solid; border-width: 1px;
padding: 2px; width: 200px;"> </div>
<div class="BarIndicator" id="PasswordStrengthBar" style="position: absolute;
display: inline; height: 5px; top: 381px; left: 559px; width: 100px;
background-color: blue;">
</div>
<span style="position: absolute; top: 389px; left: 556px; font-size: 75%;
display: inline-block; width: 200px;">3 more characters, At least 1 more symbol,
1 Upper case characters, 1 lower case character</span>
所有这些都是动态html,并通过插件添加到html页面。我需要将所有这三个元素包装在一个div中。这样做的正确方法是什么?
答案 0 :(得分:3)
答案 1 :(得分:2)
<div id="parent">
</div>
然后当您动态创建新的简单调用
时$('#parent').html().append(dynamicallyGeneratedHtml);
答案 2 :(得分:0)
如果3个div的内容是动态的(但不是结构),则可以设置模板并使用json连接数据
$.post('web/serverside', function(data){
$.each(data, function(i,obj)
{
$(#mydiv).html('<div id="PasswordStrengthBorder" style="position: absolute; display: inline;'+
'height:3px; top: 379px; left: 556px; border-style: solid; border-width: 1px;'+
'padding: 2px; width: 200px;">'+obj['value1'])+'</div>'+
'<div class="BarIndicator" id="PasswordStrengthBar" style="position: absolute;'+
'display: inline; height: 5px; top: 381px; left: 559px; width: 100px;'+
'background-color: blue;">'+obj['value2'])+'</div>'+
'<span style="position: absolute; top: 389px; left: 556px; font-size: 75%;'+
'display: inline-block; width: 200px;">'+obj['value3'])+'</span>');
});
}, 'json');