Question

动态创建div和元素创建的添加样式

var div = document.createElement('div');
div.setAttribute("id","div1");
document.body.appendChild(div);
//above simulation dynamic ajax loading

$(document).ready(function () {
    $(document).on('load','#div1',function () {
        console.log(12323);
        $(this).css({'color':'red'});
    });
});

它不起作用;控制台是空白的;颜色不是红色;帮助我;

Answer 1

不需要load()。

   var div = document.createElement('div');
   div.setAttribute("id", "div1");
   document.body.appendChild(div);
    //above simulation dynamic ajax loading

   $(document).ready(function() {
     $('#div1').css({
       'color': 'red',
       'width': '100px',
       'height': '100px',
       'background': 'yellow'
     });
   });

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

Answer 2

试试这个......

jQuery load()方法从服务器加载数据并将返回的数据放入选定的元素中。

您必须使用ready()进行onload事件

＆＃13;

var div = document.createElement('div');
div.setAttribute("id", "div1");
document.body.appendChild(div);
//above simulation dynamic ajax loading

$(document).ready(function() {
  $(div).ready(function() {
    console.log(12323);
    $(div).css({
      'color': 'white',
      'background': 'red',
      'height': '200px',
      'width': '200px'
    });
  });
});

＆＃13;

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

＆＃13;

Answer 3

这是你想要完成的吗？

$(document).ready(function(){
  $('body').append('<div id="div1">Hi</div>');
  $('#div1').css({'color':'red'});
  console.log('12323');
});

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

Answer 4

实现它的更有效和DRY方法是：

function createElement(elem, attr, parent){
  "use strict";
  var dom = document,
  el = dom.createElement(elem);
  if(attr.id > ''){
    el.id = attr.id;
  } if(attr.class > ''){
    el.className += attr.class;
  }
  if (parent > '') {
    parent.appendChild(el);
  } else {
    dom.body.appendChild(el);
  }
}

var div1 = document.getElementById("div1");
createElement("div", {id: "test1", class: "test2"}, div1);

动态创建div和元素创建添加样式

4 个答案: