“document.getElementById”在“document.write”之后返回null

Question

我正在使用 JavaScript 代码在我的文档中编写内容：

nr = Math.floor(Math.random()*99999999999);
document.write('<div class="wads-content-' + nr + '" id="flashcontent' + nr + '">'+ flashrequired +'</div>');
var flashcontent = document.getElementById('flashcontent' + nr);

在我的页面中，我执行了这个脚本两次。第一次一切正常，但第二次，flashcontent为null，但我知道这是错误的，因为我只是在它之前写了该元素：

 document.getElementById

有什么想法正在发生吗？

- Sebastien

---

使用 document.getElementById 应该在写入后起作用。你的语法肯定有问题。 - Jivings

是的，第一次可以工作，但第二次就不行了... - Sebastien

Answer 1

不要使用 document.write，而是使用（老式的JavaScript）

var div = document.createElement("div");
div.className = "wads-content-" + nr;
div.id = "flashcontent";
div.innerHTML = flashrequired;

jQuery的做法是这样的：

$("<div/>").addClass("wads-content" + nr).attr("id", "flashcontent" + nr);
var flashcontent = $("#flashcontent" + nr);

- adarshr

---

我该如何将它添加到我的文档中呢？ :) - Sebastien

document.body.appendChild(div); / jQuery - flashcontent.appendTo('body');document.body.appendChild(div); / jQuery - flashcontent.appendTo('body'); - Alex Pacurar

在您的jQuery版本中，您需要先将div附加到DOM中，然后才能使用$("#flashcontent")进行选择。 - Rory McCrossan

不，我想要插入我的脚本被调用的地方。 - Sebastien

我该如何使用document.write和createElement来实现这个？ - Sebastien

Answer 2

我的解决方案是使用以下代码：

var div = document.createElement("div");
div.innerHTML = flashrequired;
//Add the flash HTML (embed) in my div
addFlash(div);

var el = '<div class="wads-content-' + nr + '" id="flashcontent' + nr + '">'+ div.innerHTML +'</div>';
document.write(el);

所以我不需要在DOM中查找元素，我可以在JavaScript中创建它并将其写入文档中。

- Sebastien

---

这里临时的 div 元素对象是多余的。var el = '...' + flashrequired + '...'; 是等价的。 - PointedEars

Answer 3

我只能假设第二次调用document.write()发生在文档加载完成之后。然后，由于输出流已关闭，该调用会覆盖文档。另请参见W3C DOM Level 2 HTML。

- PointedEars

---

你好，如果是这种情况，我认为我的文档将被截断并替换为document.write的字符串。我错了吗？ - Sebastien

正确，但请注意文档树的差异。它不是合法的，所以一切皆无法保证。如果代码是HTML格式或作为text/html服务，则必须在字符串字面值中转义ETAGO分隔符（</），最好使用<\/。 - PointedEars

text/javascript 更兼容，但我不知道这是否仍然相关。无论如何，ETAGO问题不适用。尽管如此，生成的标记需要有效。您可以在 document.getElementById(...) 之前进一步尝试 document.close()，但我认为最好的方法是监听“load”事件，因为它指定文档已加载并且解析树已完成。 - PointedEars

我不能这样做，因为我正在创建一个广告系统，我需要在我的文档中写下媒体被调用的时间。 - Sebastien

你不能做什么？如果这些解决方案都不可行，可以使用建议的else-thread中的appendChild()或innerHTML，或其他DOM方法（请参见规范）。 - PointedEars

让我们在聊天室里继续讨论这个话题。 - Sebastien