Question

    var count=3;
    socket.once('temp', function(temp){
      for (var i= 1; i < temp.length; i++) {
      $('#graphs').append('<div class= "myDiv2"' id="myDiv' + count + '" position:"relative;" style="width: 85%; height: 550px;">hi</div>');
      count++;
    };
  });
    var plotDiv2 = $('#myDiv3');
    console.log(plotDiv2);

当我尝试打印这个附加的div时，没有打印出来的东西？如何正确访问附加的div？

Answer 1

看来您的报价不匹配。请注意帖子中的语法颜色编码因此，代码抛出语法错误：

未捕获的SyntaxError：意外的标识符

以下是有效版本：

var count = 3,
    html = '<div class= "myDiv2" id="myDiv' + count + '" position:"relative;" style="width:50px; height:50px;">hi</div>';

jQuery('body').append(html);

div {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但是，为简化起见，我建议使用jQuery create the new element，而不是直接连接HTML字符串。

我还建议您将CSS定义包含在external style sheet中，而不是直接在HTML中包含内联样式。有关详细参考，请参阅Inline tags vs. inline css properties。

var $graphs=jQuery('#graphs');

for (var count = 3; count < 5; count++) {

  jQuery('<div>', {
    'class': 'myDiv',
       'id': 'myDiv' + count,
     'text': 'hi ('+count+')'
  }).appendTo($graphs);

};

var plotDiv2 = $('#myDiv3')
console.log(plotDiv2.prop('id'));

.myDiv {
  position: relative;
  width: 50px;
  height: 50px;
  background-color:red;
  margin:1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graphs"></div>

有关其他示例，请参阅this answer。

试图访问JQUERY中的追加元素

1 个答案: