javascript - document.write 的替代品

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 的替代方法？我不能简单地使用 window 的原因是这是在主视图页面内呈现的视图内部。窗口无法正确获得嵌套区域宽度。

该地区几乎在这里：

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

AREA 不知道任何其他 div。

score 4 · Accepted Answer

这只是我突然想到的，我记得你的问题：脚本代码可以找到它所在的脚本块，所以你可以从那里遍历 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 中不存在“之后”跨度。

然而，有一个非常简单的方法可以让这个失败。

score 3 · Accepted Answer

这种方法没有其他选择。这是脚本可以在不知道它加载到的 DOM 的任何信息的情况下找到它嵌套的元素的宽度的唯一方法。

在适当使用document.write()时使用是合法的。尽管向 DOM 追加一个新元素是可取的，但这并不总是一个可用的选项。

score 1 · Accepted Answer

如果你知道它是哪个子元素，你可以在 jquery 中使用第 n 个子元素。否则你需要用 each() 遍历它们

score 0 · Accepted Answer

像这样创建并附加孩子：

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

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

javascript - document.write 的替代品

4 回答 4

Related

Reference