在 JavaScript 中，我可以获取脚本所在的节点吗？

发布于 2024-10-10 07:35:36 字数 1679 浏览 6 评论 0 原文

JavaScript 有没有办法在脚本标签上没有 id 属性的情况下获取当前正在执行的脚本节点的父节点？

为了说明我的意思，如果我想将 img 附加到文档，并且我想将该图像附加到 id 为“div1_id”的 div 节点，我可以在不知道 div 的 id 的情况下执行此操作吗？脚本标记的 id="_scriptid" 属性，正如我在下面必须做的那样？

<script type="text/javascript">
    function fn1()
    {
        var my_img = document.createElement("img");
 var t = document.getElementById("_scriptid");
 if (t.parentNode) {
  t.parentNode.appendChild(my_img);
 } else {
  document.getElementsByTagName("body")[0].appendChild(my_img);
 }
    }
</script>

<div id="_div1_id" name="_div1_name">
    <script type="text/javascript" id="_scriptid">
        fn1();
    </script>
</div>

这就是我想做的：

<head>
  <script type="text/javascript">
    function fn1()
    {
        var my_img = document.createElement("img");
 var x = get the node that is the parent node of the current script tag,
                and so that I can still separate this code out into a function
                as shown here, I do not want the <head> tag returned, I want to
                get the parent node of the script that called this function, i.e.
                the node commented as "div1" below.
 x.appendChild(my_img);
    }
  </script>
</head>

<div>  <!-- div1 -->
    <script type="text/javascript">
        // Call a function to add an image to the enclosing node (div node in this example):
        fn1();
    </script>
</div>

我问的原因是有人告诉我他们在 IE8 中遇到错误“HTML 解析错误：无法在子元素关闭之前修改父容器元素 (KB927917)”，我怀疑这可能是因为我正在使用appendChild将图像附加到body元素并且body元素未关闭。知识库文章建议添加到直接父级（即使该标记显然未关闭）可以解决该问题。

谢谢。

原文

Is there any way in JavaScript to get hold of the parent node of the currently executing script node without have an id attribute on the script tag?

To illustrate what I mean, if I want to append an img to the document, and I want to append that image to the div node with id "div1_id", can I do that without knowing the id of the div, or having to add the id="_scriptid" attribute to the script tag, as I have had to do below?

<script type="text/javascript">
    function fn1()
    {
        var my_img = document.createElement("img");
 var t = document.getElementById("_scriptid");
 if (t.parentNode) {
  t.parentNode.appendChild(my_img);
 } else {
  document.getElementsByTagName("body")[0].appendChild(my_img);
 }
    }
</script>

<div id="_div1_id" name="_div1_name">
    <script type="text/javascript" id="_scriptid">
        fn1();
    </script>
</div>

Here's what I want to do:

<head>
  <script type="text/javascript">
    function fn1()
    {
        var my_img = document.createElement("img");
 var x = get the node that is the parent node of the current script tag,
                and so that I can still separate this code out into a function
                as shown here, I do not want the <head> tag returned, I want to
                get the parent node of the script that called this function, i.e.
                the node commented as "div1" below.
 x.appendChild(my_img);
    }
  </script>
</head>

<div>  <!-- div1 -->
    <script type="text/javascript">
        // Call a function to add an image to the enclosing node (div node in this example):
        fn1();
    </script>
</div>

The reason I ask is that I am getting someone telling me they are getting an error in IE8 "HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)" and I suspect it may be because I am using appendChild to append an image to the body element and the body element is not closed. The KB article suggests that adding to the direct parent (even though that tag is obviously not closed) resolves the problem.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冰雪之触 2024-10-17 07:35:36

尝试将代码分配给函数，然后将其分配给 window.onload 变量

回复收藏 0 原文

月棠 2024-10-17 07:35:36

我认为解决您问题的方法可能是重新思考问题。

首先，你说你的IE8有问题。我的建议：使用像 jQuery 这样的 Javascript 库来为您处理所有浏览器特定的问题。

然后，您有一些内部带有脚本的 div，并且您不想为这些 div 或脚本提供唯一的 id。尽管如此，您确实必须将 seomthing 放入 div 中才能调用该函数。我的建议：改用类。

<div class="callFn1"></div>

这有什么用？
与 jQuery 结合，这为您的问题提供了以下解决方案：

$(".callFn1").each(
  function() {
    fn1(this);
  });

使用 $(".callFn1") 选择包含类“callFn1”的所有元素，.each 迭代所有选定的元素并调用函数。该函数使用参数 this 调用 fn1 - 它为您提供当前正在处理的元素。您现在要做的就是修改您的函数 fn1 ，如下所示：

function fn1(x)

I think the solution to your problem might be in rethinking the problem.

First of all, you say you got problems with IE8. My advice: Use a Javascript library like jQuery that handles all those browser-specific gotchas for you.

Then, you have some divs with scripts inside and you don't want to give the divs or scripts unique ids. Nonetheless, you do have to put seomthing in your div to call the function. My advice: use classes instead.

<div class="callFn1"></div>

How is this useful?
In combination with jQuery, this gives you the following solution to your problem:

$(".callFn1").each(
  function() {
    fn1(this);
  });

With $(".callFn1") you select all elements that contain the class "callFn1", .each iterates on all the selected elements and calls a function. This function calls fn1 with parameter this - which gives you the current element that's processed. All you'd have to do now, would to modify your function fn1 a little bit like this: