Question

我试图使用Jquery创建一个新的div但不幸的是它没有显示在我的html页面上。

html / css / js code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <style>
      #main_container{
        background-color:red;
        height:100px;
        width:200px
      }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      var main_container = $("#mainViewContainer");
      $('#mainViewContainer').append($('<div id="table_layout" />')
          .append($('<table id="table_set"/>')
          .append('<thead><tr> <th>ID</th><th>Name</th> <th>DOB</th>  <th>Date Enrolled</th>   </tr></thead>')));

      main_container.appendTo(document.body)
    });
    </script>
  </head>
  <body>
  </body>
</html>

Answer 1

你应该改变：

var main_container = $("#mainViewContainer");

到

var main_container = $("<div/>").attr("id", "mainViewContainer");

这将创建一个指定了id的新div。

$("#mainViewContainer")返回标识为mainViewContainer的元素，而不是创建元素。

<强> Fiddle

Answer 2

创建div使用：

var main_container = $("<div>").attr("id", "mainViewContainer");

您的代码变为：

$(document).ready(function(){
    var main_container = $("<div>").attr("id", "mainViewContainer");
    main_container.append($('<div id="table_layout" />')
            .append($('<table id="table_set"/>').
                    append('<thead><tr> <th>ID</th><th>Name</th> <th>DOB</th>  <th>Date Enrolled</th>   </tr></thead>')));

    main_container.appendTo(document.body)
});

JSFIDDLE

Answer 3

由于您要将mainViewContainer附加到正文，我假设您的dom中没有ID为mainViewContainer的元素。

首先你需要创建一个带有所述id的新元素，然后在将元素添加到文档之后将内容添加到它中，如下所示

$(document).ready(function () {
    //create a new div with id mainViewContainer
    var main_container = $('<div id="mainViewContainer"></div>');
    //append new elements to mainViewContainer
    main_container.append($('<div id="table_layout" />')
        .append($('<table id="table_set"/>').
    append('<thead><tr> <th>ID</th><th>Name</th> <th>DOB</th>  <th>Date Enrolled</th>   </tr></thead>')));

    //append mainViewContainer to body
    main_container.appendTo(document.body)
});

演示：Fiddle

使用jQuery创建一个新的div

3 个答案: