blocks|key|1824106|text|document.write()不能与XHTML一起工作。它是在页面加载完成后执行的，除了写出一个HTML字符串之外，什么也做不了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1824107|由于HTML的实际内存表示是DOM，因此更新给定页面的最佳方法是直接操作DOM。|1824108|这样做的方法是以编程方式创建节点，然后将它们附加到DOM中的现有位置。对于一个人为设计的示例，假设我有一个维护“ID”标题属性的div元素，那么我可以通过这样做来引入一些动态文本：|1824109|//+create+my+text
var+sHeader+=+document.createTextNode('Hello+world!');

//+create+an+element+for+the+text+and+append+it
var+spanHeader+=+document.createElement('span');
spanHeader.appendChild(sHeader);

//+grab+a+reference+to+the+div+header
var+divHeader+=+document.getElementById('header');

//+append+the+new+element+to+the+header
divHeader.appendChild(spanHeader);|code-block|syntax|javascript|1824110|entityMap^0|0|G|0|0|1K|2|1S|3|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<code>document.write()</code> doesn't work with XHTML. It's executed after the page has finished loading and does nothing more than write out a string of HTML. 

Since the actual in-memory representation of HTML is the DOM, the best way to update a given page is to manipulate the DOM directly.

The way you'd go about doing this would be to programmatically create your nodes and then attach them to an existing place in the DOM. For [purposes of a contrived] example, assuming that I've got a <code>div</code> element maintaining an <code>ID</code> attribute of "header," then I could introduce some dynamic text by doing this:

<pre><code>// create my text
var sHeader = document.createTextNode('Hello world!');

// create an element for the text and append it
var spanHeader = document.createElement('span');
spanHeader.appendChild(sHeader);

// grab a reference to the div header
var divHeader = document.getElementById('header');

// append the new element to the header
divHeader.appendChild(spanHeader);
</code></pre>

blocks|key|2038695|text|也许在这种情况下使用jQuery是一个好主意。它提供了方便的功能，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2038696|$('div').html('Test');|code-block|syntax|javascript|2038697|有关更多信息，请查看http://docs.jquery.com/Attributes/html#val。|offset|length|2038698|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Attributes/html#val^0|0|0|A|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Perhaps a good idea is to use jQuery in this case. It provides handy functionality and you can do things like this:

<pre><code>$('div').html('&lt;b&gt;Test&lt;/b&gt;');
</code></pre>

Take a look at <a href="http://docs.jquery.com/Attributes/html#val" rel="noreferrer">http://docs.jquery.com/Attributes/html#val</a> for more information.

blocks|key|2037871|text|您可以改为更改页面上元素的innerHTML或outerHTML。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2037872|entityMap^0|D|9|N|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

You can change the <code>innerHTML</code> or <code>outerHTML</code> of an element on the page instead.

blocks|key|2038225|text|我不是特别擅长JavaScript或它的最佳实践，但是document.write()和innerHtml()基本上允许您写出可能是有效的HTML也可能不是有效的HTML的字符串；它只是字符。通过使用DOM，您可以确保适当的、符合标准的HTML，这将防止您的页面被明显不好的HTML破坏。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2038226|而且，正如Tom提到的，JavaScript是在页面加载之后完成的；更好的做法可能是让页面的初始设置通过标准的HTML完成(通过.html文件或您的服务器所做的任何事情，例如php)。|2038227|entityMap^0|R|G|18|B|0|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|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

I'm not particularly great at JavaScript or its best practices, but <code>document.write()</code> along with <code>innerHtml()</code> basically allows you to write out strings that may or may not be valid HTML; it's just characters. By using the DOM, you ensure proper, standards-compliant HTML that will keep your page from breaking via plainly bad HTML.

And, as Tom mentioned, JavaScript is done after the page is loaded; it'd probably be a better practice to have the initial setup for your page to be done via standard HTML (via .html files or whatever your server does [i.e. php]).

blocks|key|1825070|text|当然，最好的方法是避免在JavaScript中创建任何繁重的HTML语言？从服务器发送的标记应该包含它的大部分内容，然后您可以使用CSS而不是暴力删除/替换元素来操作这些内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1825071|如果你正在做一些“聪明”的事情，比如模拟一个窗口小部件系统，那么这就不适用了。|1825072|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Surely the best way is to avoid doing any heavy HTML creation in your JavaScript at all? The markup sent down from the server ought to contain the bulk of it, which you can then manipulate, using CSS rather than brute force removing/replacing elements, if at all possible.

This doesn't apply if you're doing something "clever" like emulating a widget system.

blocks|key|2038033|text|document.write方法非常有限。您只能在页面加载完成之前使用它。您不能使用它来更新已加载页面的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2038034|您可能需要的是innerHTML。|offset|length|2038035|entityMap|0|LINK|mutability|MUTABLE|url|http://www.tizag.com/javascriptT/javascript-innerHTML.php^0|0|7|9|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

The document.write method is very limited. You can only use it before the page has finished loading. You can't use it to update the contents of a loaded page.

What you probably want is <a href="http://www.tizag.com/javascriptT/javascript-innerHTML.php" rel="nofollow noreferrer">innerHTML</a>.

blocks|key|1824954|text|我认为您应该使用document.createElement、.createTextNode、.appendChild等DOM+JavaScript应用程序接口，而不是document.write。安全且几乎跨浏览器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1824955|ihunger's+outerHTML不是跨浏览器的，它只支持IE。|1824956|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/1533601^0|8|M|V|F|1B|C|2C|E|0|A|9|0|9|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|H|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

I think you should use, instead of <code>document.write</code>, DOM JavaScript API like <code>document.createElement</code>, <code>.createTextNode</code>, <code>.appendChild</code> and similar. Safe and almost cross browser.

<a href="https://stackoverflow.com/a/1533601">ihunger's</a> <code>outerHTML</code> is not cross browser, it's IE only.

blocks|key|1825275|text|使用jquery，看看它是多么简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1825276|++++var+a+=+'<h1>+this+is+some+html+</h1>';
++++$("#results").html(a);

+++++++//html
++++<div+id="results">+</div>|code-block|syntax|javascript|1825277|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use jquery, look how easy it is:

<pre><code> var a = '&lt;h1&gt; this is some html &lt;/h1&gt;';
 $("#results").html(a);

 //html
 &lt;div id="results"&gt; &lt;/div&gt;
</code></pre>

It seems that experienced web developers frown upon using <code>document.write()</code> in JavaScript when writing dynamic HTML.
Why is this? and what is the correct way?

What is the correct way to write HTML using Javascript?

服务器

jQuery

在编写动态超文本标记语言时，有经验的web开发人员似乎不喜欢在JavaScript中使用document.write()。为什么会这样呢？正确的方法是什么？

问使用Javascript编写HTML的正确方法是什么？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript编写HTML的正确方法是什么？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript编写HTML的正确方法是什么？
EN