Question

我一直在使用document.write来生成页面的HTML部分，使用循环填充它。例如，我需要在页面上创建以下10项内容：

<div class=" normal" id="1"
    style="text-align:left;
    top:  13px;
    left: 5px;
    height: 10em; 
    width: 12em;">
    <div class = "wrap">
     <div class = "show">
      <strong>New York City
      <p>Status: Cold</p>
      </strong>         
      </div>
     <div class = "noshow">
        <P>0001: Normal</P>             
        </div>

     <div class = "here">
        <P>0001: online</P>
        <P>0002: online</P>

        </div>
        </div>                      
</div>

我一直在做：

<script>
document.write("<div class=\"");
.. you get the idea</script>

使用jquery或not-document.write执行此操作的另一种方法是什么？您是否也可以提供应用于上述代码的简短示例。

Answer 1

将整个事物放在一个变量中：

说：var html_content = "<div class=.....";

在您的循环中，您只需使用.append(html_content);

即可

Answer 2

您可以使用DOM操作直接查询并向DOM添加节点元素。

http://www.howtocreate.co.uk/tutorials/javascript/dombasics

Answer 3

Jquery .html()可能有助于此目的。

<script>
   $(function() {
     var htmlString = "<div>.. you get the idea</div>";
     $("body").html(htmlString);
   });
</script>

或者这将附加html： .append()

<script>
   $(function() {
     var htmlString = "<div>.. you get the idea</div>";
     $("body").append($(htmlString));
   });
</script>

Document.write替代示例

3 个答案: