Element.innerHTML

Question

在下面的代码中，我有一个带ID的已定义脚本，因此我可以从DOM访问它。如您所见，我在脚本定义期间请求DOM中定义的脚本。在请求innerhtml调用时，这怎么不以递归方式调用自己？

我的猜测是DOM解析定义的脚本并将ID放入DOM中。在浏览器中执行期间，JS通过ID获取元素并从脚本加载HTML。我觉得会构造一个递归调用，因为在浏览器端执行期间，我们需要在innerHTML方法中获取HTML，这将再次执行JS脚本吗？

问题：我的假设是正确的还是我错过了关于DOM的一些内容，如果是的话，我不知道它是什么？

<script id="myScript">
var x = 1;
var y = 2;

if (x != y) {
  var html_code = document.getElementById("myScript").innerHTML;
  //More JavaScript Below here
  console.log(html_code);
}
</script>

Answer 1

您的假设是，.innerHTML的请求将重新运行javascript是错误的。它只会返回元素的文本。

Answer 2

将元素的innerHTML存储到变量html_code中时，<script>标记内的文本 - 即实际脚本本身 - 返回，并在控制台中显示为文本。但只显示该代码实际上不会执行它。

现在，如果您在eval()变量上使用html_code，那么将执行代码。请参阅以下示例：

<script id="myScript">
  var x = 1;
  var y = 2;

  if (x != y) {
    var html_code = document.getElementById("myScript2").innerHTML;
    //More JavaScript Below here
    eval(html_code);
  }
</script>

<script id="myScript2">
  alert("test");
</script>

Answer 3

该代码返回元素的当前 HTML 。

执行渲染/解析/编译过程的人是浏览器本身或任何分析/渲染/编译HTML代码，脚本等的中间件。

<script id="myScript">
  var x = 1;
  var y = 2;

  if (x != y) {
    var html_code = document.getElementById("myScript").innerHTML;
    console.log(html_code)
  }
</script>

Element.innerHTML

Element属性innerHTML属性用于获取或设置字符串，表示描述元素后代的序列化HTML。

因此，该属性不会执行任何编译过程或脚本。

为脚本定义id并在同一脚本中引用该id

3 个答案:

Element.innerHTML