Question

我正在尝试使用JavaScript将HTML对象放在视图中。这可能吗？我正在寻找以下内容：

<script>
 <% for @m in @messages %>
  <h1>i</h1>
 <% end %>
</script>

我需要它做的是与Ruby携手并进。不知道这是否可行。

Answer 1

您可以通过在正文中嵌入script元素并调用document.write

来实现此目的

<p>
   Some generated HTML coming up....
</p>
<script>
    for(var i = 0; i < 10; ++i) {
         document.write("<h1>" + i + "</h1>");
     }
</script>
<p>
   This will appear after the generated HTML
</p>

Answer 2

您可以尝试以下操作：

var cars = ["car", "car", "car"];

for (i = 0; i < cars.length; i++) { 
  var h1 = document.createElement('h1');
  h1.innerHTML = i;
  document.body.appendChild(h1);
}

这假设您要将元素附加到<body>。

中

JSFiddle：https://jsfiddle.net/zh0wc0zL/2/

Answer 3

你想要的是直接在JS中创建新的DOM节点，是的，你可以这样做。您实际上可以使用HTML来执行此操作，并将其解析为您需要的节点。

如果您需要在页面加载时执行此操作，则会将节点放在放置脚本的body位置：

<script>
  var cars = ["Honda", "Toyota", "Volkswagen"];
  for (var i = 0; i < cars.length; i++) {
    document.write(`<h1>${i}: ${cars[i]}</h1>`);
  }
</script>

请注意 document.write很少使用，只有在加载页面时才能正常工作。初学者经常陷入困境。

如果需要在页面加载后的某个时间完成此操作，您可以采用不同的方式。

var myButton = document.getElementById("button"); myButton.addEventListener("click", function(event) { var container = document.getElementById("container"); var cars = ["Honda", "Toyota", "Volkswagen"]; for (var i = 0; i < cars.length; i++) { container.insertAdjacentHTML("beforeend", `<h1>${i}: ${cars[i]}</h1>`); } }, false);

<button id="button">CLICK ME</button> <div id="container"></div>

这假设页面上有一个ID为"button"的元素，并且ID为"container"，应该会获得新元素。

Answer 4

你可以试试这个。 HTML：

<body>
  <h1 id = 'example'></hi>
</body

使用Javascript： document.getElementById（'example'）。innerHTML（'你想要的任何文字'）;

如何在JavaScript中注入HTML代码？

4 个答案: