Question

我处于一种似乎必须在javascript库中使用document.write的情况。脚本必须知道定义脚本的区域的宽度。但是，该脚本对该区域中的任何标记都没有任何明确的知识。如果有明确的div知识，那么就像这样简单：

<div id="childAnchor"></div>
<script ref...
 //inside of referenced script
 var divWidth = $("#childAnchor").width();
</script>

因此，在引用的脚本中，我正在考虑使用document.write，如下所示：

<script ref...
 //inside of referenced script
 var childAnchor = "z_87127XNA_2451ap";
 document.write('<div id="' + childAnchor + '"></div>');
 var divWidth = $("#" + childAnchor).width();
</script>

但是，我真的不喜欢document.write实现。有没有替代在这里使用document.write？我不能简单地使用窗口的原因是它在一个视图内部，在一个主视图页面内呈现。窗口无法正确获得嵌套区域宽度。

该区域几乎就在这里：

<body>
 <div>
  <div>
   <div>
     AREA

AREA不了解任何其他div。

Answer 1

这刚刚发生在我身上，我记得你的问题：脚本代码可以找到它所在的脚本块，因此你可以从那里遍历DOM。当前脚本块将是DOM中最后一个（当代码运行时DOM仍然被解析）。

通过查找当前脚本块，您可以找到其父元素，并在任何位置添加新元素：

<!doctype html>
<html>
    <head>
        <style>
        .parent .before { color: red; }
        .parent .after { color: blue; }
        </style>
    </head>
    <body>
        <script></script>
        <div class="parent">
            <span>before script block</span>
            <script>
            var s = document.getElementsByTagName('script');
            var here = s[s.length-1];

            var red = document.createElement("p");
            red.className = 'before';
            red.innerHTML = "red text";
            here.parentNode.insertBefore(red, here);

            var blue = document.createElement("p");
            blue.className = 'after';
            blue.innerHTML = "blue text";
            here.parentNode.appendChild(blue);
            </script>
            <span>after script block</span>
        </div>
        <script></script>
    </body>
</html>

http://jsfiddle.net/gFyK9/2/

请注意，“蓝色文本”范围将插入“脚本块后”范围之前。那是因为调用appendChild时DOM中不存在“after”跨度。

然而there's a very simple way to make this fail。

Answer 2

除此方法外别无选择。这是脚本可以找到嵌套元素的宽度的唯一方法，而不知道任何关于它加载到的DOM。

正确使用document.write()是合法的。虽然，最好在DOM中附加一个新元素，但它并不总是可用的选项。

Answer 3

如果您知道它是哪个子元素，则可以在jquery中使用param nth子元素。否则你需要用each（）

遍历它们

Answer 4

像这样创建并附加孩子：

var el = document.createElement('div');
el.id='id';
document.body.appendChild(el);

但是我不确定你想用它做什么来获得任何宽度，它可能会返回0。

document.write的替代品

4 个答案: