blocks|key|310698|text|脚本在加载时运行。因为您的脚本出现在您试图编辑的div元素之前(并且您没有做任何事情来延迟它的执行)，所以document.getElementById将返回null，并且脚本将出错。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|310699|将脚本移到紧接</body>之前。|offset|length|style|CODE|310700|此外，该方法是getElementById而不是getElementByid。|310701|也就是说，依靠JavaScript来添加基本导航并不是一个好主意。使用pre-processor+or+server+side+solution可能会更好。|310702|entityMap|0|LINK|mutability|MUTABLE|url|http://allmyfaqs.net/faq.pl?Include_one_file_in_another^0|0|7|7|0|7|E|O|E|0|Z|11|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

Scripts run when they are loaded. Since your script appears before the div element you are trying to edit (and since you do nothing to delay it's execution), document.getElementById will return null and the script will error.

Move the script to immediately before <code>&lt;/body&gt;</code>.

Additionally, the method is <code>getElementById</code> not <code>getElementByid</code>.

That said, depending on JavaScript to add basic navigation is a poor idea. You would likely be better off using a <a href="http://allmyfaqs.net/faq.pl?Include_one_file_in_another" rel="nofollow noreferrer">pre-processor or server side solution</a>.

blocks|key|1495145|text|我一直都在这么做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1495146|getElementByid|code-block|syntax|javascript|1495147|应该是|1495148|getElementById|1495149|编辑:我的错误是将d大写...getElementByID。|1495150|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I do this ALL the time...

<pre><code>getElementByid
</code></pre>

should be 

<pre><code>getElementById
</code></pre>

EDIT: My mistake is to capitalize the d... getElementByID.

blocks|key|311088|text|问题是您试图通过ID访问一个尚不存在的元素。您的脚本将在包含它的点上执行。您需要等到解析完文档并准备好DOM树之后。您可以通过使用window+load事件来完成此操作，或者如果您正在使用任何类型的JavaScript工具包，如Prototype或jQuery，它们通常会提供更早发生的事情(因为window.load仅在加载所有图像之后发生)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|311089|编辑:当然，正如其他人所说，你有一个拼写错误，它是getElementById。|311090|entityMap^0|20|4|44|B|0|P|E|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

The problem is that you're trying to access an element by ID that doesn't exist yet. Your script will be executed at the point it's included. You need to wait until the document has been parsed and the DOM tree has been prepared. You can do that by using a window <code>load</code> event, or if you're using any kind of JavaScript toolkit like Prototype or jQuery, they usually offer something that happens earlier (since <code>window.load</code> only happens after all images are loaded).

EDIT: And, of course, as others have said, that you have a typo, it's <code>getElementById</code>.

blocks|key|1495307|text|使用innerHTML方法会有问题，因为您试图检索的文档<div>元素可能还没有出现在文档中。如果使用该方法，则需要在文档加载后调用innerHTML内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1495308|这里的document.write没有什么问题。如果您确实需要使用JavaScript动态编写内容，那么使用document.write可以避免使用加载事件处理程序，并且会使内容立即出现，而不是在文档加载后对文档进行明显更改。|1495309|entityMap^0|S|5|0|3|E|1I|E|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

You will have a problem with the innerHTML approach because the document <code>&lt;div&gt;</code> element you're trying to retrieve may not yet be present in the document. You'll need to call the innerHTML stuff after the document has loaded if you go that route.

There's nothing wrong with <code>document.write</code> here. If you really have to write content dynamically with JavaScript, using <code>document.write</code> will avoid messing about with load event handlers and will make your content appear immediately rather than visibly changing the document once it has loaded.

blocks|key|1495337|text|您需要在主体加载之后调用javascript，以便您引用的元素已经初始化。要做到这一点，你应该把你的代码放在一个函数中。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1495338|1495339|函数buildNav()+{+...+}|blockquote|1495340|1495341|1495342|然后在body标记上使用onload事件：|1495343|1495344|+<body+onload="buildNav()">|offset|length|style|CODE|1495345|1495346|1495347|这样，在主体加载完成之前，javascript将不会运行。|1495348|entityMap^0|0|0|0|0|0|0|0|1|Q|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Y|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|E|7|13|8|@$M|14|N|15|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

You need to call the javascript after the body has loaded so that the element you are referencing has been initialized. To do this you should put your code in a function. e.g.

<blockquote>
 function buildNav() {
 ...
 }
</blockquote>

Then on your body tag, use the onload event:

<blockquote>
 <code>&lt;body onload="buildNav()"&gt;</code>
</blockquote>

That way the javascript will not run until the body is done loading.

blocks|key|1495376|text|除了‘id’的大小写和加载顺序:让基本的网页内容依赖于JavaScript通常是一个非常糟糕的想法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1495377|这给你带来了可访问性问题，意味着搜索引擎将忽略你所有的链接。仅仅是为了省去复制和粘贴几个标签，并不是一个很好的交易。|1495378|要重新生成常见的页面元素，请查看基于服务器的页面处理技术，其中最简单的是SSI。|offset|length|1495379|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Server_Side_Includes^0|0|0|10|3|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

Apart from the ‘id’ capitalisation and order of loading: it's generally a really bad idea to make essential web page content like your navigational links dependent on JavaScript.

This gives you accessibility problems and means search engines will ignore all your links. Not really a good bargain just to save copy-and-pasting a few &lt;a> tags.

For reproducing common page elements, look at server-based page processing techniques, the simplest of which is <a href="http://en.wikipedia.org/wiki/Server_Side_Includes" rel="nofollow noreferrer">SSI</a>.

This is for a simple web-page assignment.
I have a few pages on which I would like to display the same list of links in a sidebar and so have made the following javascript:

<pre><code>document.getElementByid('list').innerHTML = '&lt;a href=\"index.html\"&gt;Main Page&lt;/a&gt;'+
'&lt;a href=\"benefits.html\"&gt;Benefits&lt;/a&gt;'+
'&lt;a href=\"facts.html\"&gt;Shocking Statistics&lt;/a&gt;'+
'&lt;a href=\"links.html\"&gt;Resources&lt;/a&gt;';
</code></pre>

I then added this into the top of the page using:

<pre><code>&lt;head&gt;
&lt;script type="text/javascript" src="./script/links.js"&gt;&lt;/script&gt;
&lt;/head&gt;
...
&lt;div id="list"&gt;
&lt;/div&gt;
</code></pre>

But the problem is that the links don't appear and I fear I may have to go back to using too many <code>document.write</code> lines.

innerHTML not writing to document

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

这是一个简单的网页任务。我有几个页面，我想在侧边栏中显示相同的链接列表，因此我制作了以下javascript：document.getElementByid('list').innerHTML = '<a href=\"index.html\">Main Page</a>'+'<a href=\"benefits.html\">Benefits</a>'+'<a href=\"facts.html

问innerHTML未写入文档
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问innerHTML未写入文档EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问innerHTML未写入文档
EN