Question

是否可以从JavaScript生成html？例如，我有这个：

    <script type="text/javascript">
    for (i=0; i<=length; i++)
      {
        //I want to display a <p> tag containing the value of i
      }  
    </script>

因此，如果length = 5：

，生成的html应该看起来像这样

    <p>0</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>

是否可以这样做？

Answer 1

非常可能。您可以将元素插入DOM：

var NewP;
var Text;

for(var i = 0; i < 5; i++)
{
    NewP = document.createElement("p"); // Create a p element
    Text = document.createTextNode(i + ""); // Create text to go inside with string value of i
    NewP.appendChild(Text); // Add text to p element
    document.body.appendChild(NewP); // Append newly-created p element to body element in DOM tree
}

Answer 2

<SCRIPT LANGUAGE="JavaScript">
<!--
greeting = "<H1>Hi Web surfers!</H1>"
welcome = "<P>Welcome to <CITE>stackoverflow.com</CITE>.</P>"
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write(greeting)
document.write(welcome)
// -->
</SCRIPT>

Answer 3

不确定。你的代码看起来像这样：

<script type="text/javascript">
var total = 5;
for (i=0; i <= total; i++)
  {
    document.write('<p>' + i + '</p>');
  }  
</script>

Answer 4

是。这是可能的。例如：

<script type="text/javascript">
  var html = "";
  for (i=0; i<=6; i++) {
      html += "<p>" + i + "</p>";
  } 
  document.write(html);
</script>

Answer 5

你可以放循环中的document.write('<p>' + i + '</p>');

Answer 6

是的，有可能：

http://www.java2s.com/Code/JavaScript/HTML/GeneratingHTMLOntheFly.htm

但是有一些很好的插件可以更好地促进这个过程，特别是如果你打算做更多这样的事情：

http://api.jquery.com/category/plugins/templates/

http://akdubya.github.com/dustjs/

Answer 7

您可以在html中创建<div id="div"></div>，只需在函数中创建：

$("#div").html('<p>'+i+'</p>');

是否可以从JavaScript生成HTML？

7 个答案: