Question

我通过代码创建了这个div>

 var text = $('<div class="form-group">').append('<label class="control-label">')
        .text("test string")
        .css("font-weight", "bold")
        .append('<span>').css('color', '#253a27').text('32');

 $('#result').append(text);

很遗憾，我在div result中看不到任何文本

预期输出：

<div class="form-group>  
    <label class="control-label">test string <span style='color:#253a27;'>32</span></label>
</div>

Answer 1

链接不会将CSS和文本应用于刚刚添加的元素，而只是将其添加到第一个元素。使用append时，引用不会移至您刚刚创建的元素，而是与您当前所在的元素保持一致。这就是为什么您设置的所有内容都将应用于div的原因。

您需要将属性设置为元素本身。最简单的方法是将其分解成自己的部分。

var span = $('<span>')
  .css('color', '#253a27')
  .text('32');
var label = $('<label class="control-label">')
  .text("test string")
  .css("font-weight", "bold")
  .append(span)
var text = $('<div class="form-group">')
  .append(label)
$('#result').append(text);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="result"></div>

如果要通过链接进行操作，则必须使用find（）

var text = $('<div class="form-group">')

text
  .append('<label class="control-label">')
  .find('label')
    .text("test string")
    .css("font-weight", "bold")
    .append('<span>')
    .find("span")
      .css('color', '#253a27').text('32');

 $('#result').append(text);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="result"></div>

Answer 2

点两次使用index.html方法。第二种用法将div的内容替换为“ 32”。如果适合，请尝试以下方法：

{C:x}

text()

Answer 3

您根本不需要.text（）：

var text = $('<div class="form-group">').append('<label class="control-label">test string <span style="color:#253a27">32</span></label>')
  .css("font-weight", "bold")

$('#result').append(text);

无法将标签附加到div

3 个答案: