Question

我有这个代码示例

<div id='1'>
<div class='2'>
<script type='text/javascript' src='..'</script>
</div>
</div>

我想要的是将脚本行放在正文的底部并将目标指向第二个类以使其正常运行，就像它在其中一样。我已经看到了他们成功实现的网站。

修改上面的代码只是一个例子，而不是实际的代码。我通过在w3schools中查看DOM innerHTML找到了解决方案。

Answer 1

听起来你正在谈论一个脚本，当遇到document.write标签时，使用script同步地向解析器输出内容，例如：

＆＃13;

.foo {
  border: 1px solid black;
}

＆＃13;

<div class="foo">
<script>document.write("I'm in the div");</script>
</div>

＆＃13;

现代的方法是通过

来操纵DOM

选择目标元素，
插入/删除/修改内容

我将使用id="the-div"代替id="1"和class="the-class"代替class="2"，因为虽然可以选择您的版本CSS选择器，它不必要地笨拙（因为它们以数字开头）。

以下是选择元素并修改其内容的示例：

＆＃13;

document.querySelector("#the-div .the-class").innerHTML = "I'm in the div";

＆＃13;

.the-class {
  border: 1px solid black;
}

＆＃13;

<div id='the-div'>
<div class='the-class'>
</div>
</div>

＆＃13;

您通过the DOM（直接或使用jQuery，Knockout，React，Vue.js等库和/或框架）操作元素。

Answer 2

包含未被函数或类声明包含的“松散”JavaScript行的<script>元素的位置将导致这些行在DOM解析遇到它们的位置执行。这种线性脚本在很多年前就已经使用过，通常用于通过 document.write() 在文档的正确位置生成动态内容。

这种类型的脚本借助于散布在整个文档中的多个脚本，这使得难以维护和调试页面。相反，如果您希望代码对文档进行更改，通常最好在文档的元素完全解析后执行脚本。

此时有两种方法让您的脚本运行。

将您的脚本放在收尾body标记之前：

<!doctype html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id='1'>
    <!-- Class names cannot start with a number. -->
    <div class='two'></div>
  </div>


  <!-- The simplest way to ensure your script runs after all the HTML content
       has been parsed is to place the script just before the closing body tag. -->
  <script>
    // Just have the script locate the element(s) you want to work with:
    var nestedDiv = document.querySelector(".two"); // Finds first element that has the "two" class
    nestedDiv.textContent = "I've been added dynamically!"; // Update the text of the element
  </script>
</body>
</html>

<强> 2。当构成文档的所有元素都已解析到内存中时，浏览器将触发DOMContentLoaded事件，并且您可以设置在该事件（或其他事件）发生时自动调用的函数。

<!doctype html>
<html>
<head>
  <title></title>
  
  <!-- If using events, the location of the script doesn't matter because the
       script's code won't execute until the event it's tied to occurs. -->
  <script>
    // Set up a function to be called when the right event occurs
    window.addEventListener("DOMContentLoaded", function(){
      // Just have the script locate the element(s) you want to work with:
      var nestedDiv = document.querySelector(".two"); // Finds first element that has the "two" class
      nestedDiv.textContent = "I've been added dynamically!";
    });
  </script>
</head>
<body>
  <div id='1'>
    <!-- Class names cannot start with a number. -->
    <div class='two'></div>
  </div>
</body>
</html>

在特定元素

2 个答案: