在div中包装html内容

时间:2013-01-28 14:04:46

标签: javascript jquery html css

我有一个看似简单的问题,但有些问题我无法想出最好的方法。

以下是我的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中。这样做的正确方法是什么?

3 个答案:

答案 0 :(得分:3)

您可以使用此代码:

$('.yourClass').wrapAll('<div id="wrapper">');

http://api.jquery.com/wrapAll/

答案 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');