Question

我有一个带有以下代码的外部.js文件。

function cars() {   
cars=["BMW","Ford","Nissan"];
document.write("<h3>"+Cars+"</h3>");
   for (var j=1;j<cars[j].length;j++)
   {
    document.write("<h2>"+cars[j]+"</h2>");
   }
}

这是HTML

<html lang="en">
  <head>
    <script type="text/javascript" src="assets/js/cars.js"></script>
  </head>
  <body>
    <span id="cars">
      <script>cars();</script>
    </span>
  </body>
</html>

当我查看浏览器时，我看到了汽车列表，但是当我查看源代码时，我看到了 "<script>cars();</script>"列表应该在哪里。我在使用.innerHTML以及如何使用外部.js文件时遇到问题？有人可以帮助我。

Answer 1

使用jQuery，您可以像这样创建标签：

$('<h2>').text('hello')

jQuery允许您使用选择器按类或名称获取元素：

$('#cars') //this gets your cars span

您可以在返回的元素上调用函数，例如向其追加元素：

$('#cars').append(some_element)

您可以使用for循环为数组中的每个事物创建一个元素：

for (var i = 0; i < cars.length; i++) {
  $('#cars').append($('<h2>').text(cars[i]));
}

或者你可以使用map：

$('#cars').append(cars.map(function (car) { return $('<h2>').text(car); }));

如果您更喜欢功能更强大的方法......

Answer 2

也许你可以使用jquery函数append()

您必须稍微更改一些代码，例如，此行：

document.write("<h3>"+Cars+"</h3>");

另外，请记住Cars不是脚本中的变量。

你可以使用：

$('#cars_div').append("<h3>Cars</h3>");

并创建一个名为cars_div的id的div，以便在其上编写html代码。

另一个提示，你的for循环。请记住，您的cars数组有3个项目。要访问第一个，您需要执行cars[0]。在for循环中，var j=1会跳过第一个。

如果您需要使用jquery的可能解决方案，这里有一个fiddle。

Answer 3

必须稍微修改你的javascript，但我能够检查HTML over on plunker

enter image description here

如何使用Javascript输出HTML代码？

3 个答案: