当我向innerHTML添加HTML时，FireFox将其呈现为HTML，但IE将其显示为纯文本 [英] when I add HTML to innerHTML, FireFox renders it as HTML, but IE shows it as plain text

问题描述

本周末我想学习AJAX，所以我设置了一个小玩具页面

我可以在那里试验。这个页面的想法是你点击

其中一个框来获得一些控件，此时你可以在框中添加文字，

图片或HTML 。这似乎在FireFox中运行良好，但在IE中不是
。你可以在这里看到问题：

http：// www .publicdomainsoftware.org / ajaxExperiment.htm


在FireFox中，如果您在框中单击，然后选择添加HTML，你可以用这个
输入：


< h1>你好！< / h1>


和它显示为单词Hello！作为第一级标题完成。但是如果你在IE中做同样的事情，那么

，你得到的是上面的纯文本，

屏幕上出现的HTML标签。为什么会这样？

This weekend I wanted to learn AJAX, so I set up a little toy page
where I could experiment. The idea of this page is that you click in
one of the boxes to get some controls, at which point you can add text,
images, or HTML to the box. This seems to work fine in FireFox, but not
in IE. You can see the problem here:

http://www.publicdomainsoftware.org/ajaxExperiment.htm

In FireFox, if you click in a box and then select "Add HTML" you could
type in this:

<h1>Hello!</h1>

and it shows up as the word "Hello!" done as a first level header. But
if you do the same in IE, what you get is the above as plain text, with
the HTML tags appearing on the screen. Why is that?

推荐答案

Jake Barnes写道：

Jake Barnes wrote:

本周末我想学习AJAX，所以我设置了一个小玩具页面
我可以在那里试验。这个页面的想法是你点击其中一个框来获得一些控件，此时你可以在框中添加文本，图像或HTML。这似乎在FireFox中运行良好，但在IE中却没有。你可以在这里看到问题：

http：// www .publicdomainsoftware.org / ajaxExperiment.htm

在FireFox中，如果你点击一个框然后选择添加HTML，你可以输入这个：

< h1>你好！< / h1>

它显示为单词Hello！作为第一级标题完成。但是

This weekend I wanted to learn AJAX, so I set up a little toy page
where I could experiment. The idea of this page is that you click in
one of the boxes to get some controls, at which point you can add text,
images, or HTML to the box. This seems to work fine in FireFox, but not
in IE. You can see the problem here:

http://www.publicdomainsoftware.org/ajaxExperiment.htm

In FireFox, if you click in a box and then select "Add HTML" you could
type in this:

<h1>Hello!</h1>

and it shows up as the word "Hello!" done as a first level header. But

不，它没有，你仍然使用你的有缺陷的脚本来获得textarea元素的

innerHTML而不是价值属性在几个

的地方。忘记innerHTML，使用DOM。

-

Rob

No it doesn''t, you are still using your flawed script to get the
innerHTML of a textarea element instead of the value property in several
places. Forget about innerHTML, use DOM.
--
Rob

RobG写道：

RobG wrote:

不，它没有，你仍然使用你的有缺陷的脚本来获得textarea元素的
innerHTML而不是几个
地方的value属性。忘记innerHTML，使用DOM。

No it doesn''t, you are still using your flawed script to get the
innerHTML of a textarea element instead of the value property in several
places. Forget about innerHTML, use DOM.

为什么一直这样说？我不清楚在我的剧本中我在做什么

你说的话。我已经改变了之前的代码。我现在

首先获得textarea的值。如果没有返回任何内容，那么我接着尝试获取textarea的innerHTML。我认为第一个应该在大多数浏览器中使用
，第二个在IE中可以工作。


无论如何，你能解释一下这是怎么回事在这里打开
页面？

http://www.publicdomainsoftware.org/ajaxExperiment.htm

Why do you keep saying that? I''m not clear where in my script I''m doing
what you say. I''ve reversed the code from the way it was before. I now
get the value of the textarea first. If that returns nothing, I then
get try to get the innerHTML of the textarea. I figure the first should
work in most browsers, and the second will work in IE.

Anyway, could you explain how that throws off what HTML shows up on te
page here?

http://www.publicdomainsoftware.org/ajaxExperiment.htm

Jake Barnes写道：

Jake Barnes wrote:

RobG写道：

RobG wrote:

不，它还没有，你还在使用有缺陷的脚本来获取textarea元素的
innerHTML而不是几个中的value属性/>的地方。忘记innerHTML，使用DOM。

No it doesn''t, you are still using your flawed script to get the
innerHTML of a textarea element instead of the value property in several
places. Forget about innerHTML, use DOM.

为什么一直这样说？我不清楚我的剧本在哪里我在做什么
你说什么。我已经改变了之前的代码。我现在首先获得textarea的价值。如果没有返回任何内容，那么我会尝试获取textarea的innerHTML。我认为第一个应该在大多数浏览器中工作，第二个在IE中工作。

无论如何，你能解释一下如何抛出HTML页面上显示的内容吗？在这里？

http://www.publicdomainsoftware.org/ ajaxExperiment.htm

这是你的askForInput函数的开头，添加了注释：


函数askForInput（ introText，exampleText）{

var divRef = getRefToInputDiv（）;


divRef是对ID为&=inputDiv的DIV元素的引用。 />
var communicationBoxRef =

document.getElementById（" communicationBox"）;


communicationBoxRef也是对div的引用。 />
communicationBoxRef.style.display =" block";

communicationBoxRef.appendChild（divRef）;


由于某种原因你选择了移动inputDiv要成为cBoxRef的孩子，

它可以首先被编码为孩子，但也许有一个

的原因。然后你只需要显示/隐藏外部cBoxRef。

divRef.style.display =" block";

var area = document.getElementsByTagName（''TEXTAREA' '）[0];


您可以使用getElementsByTagName获取文本区域的引用，但是

您已经为它提供了ID，所以为什么不使用它（因为你做了几行

之后）？此外，将文本区域放入表单非常容易，然后从按钮传递this.form。现在你可以使用'元素集合表单来引用文本

区域 - 比

更简单，更容易getElementsByTagName或getElementById。


area.value = exampleText;

这将文本区域的值设置为exampleText，不需要进一步

。


var divRef = document.getElementById（" inputBox"）;

现在用文本区域元素的引用覆盖divRef

id =" inputBox" ;，与''area''引用的元素相同的元素。区域和

divRef引用相同的元素，直到有人在它之前插入另一个textarea

元素。


if（divRef。 innerHTML =="" || divRef.innerHTML == undefined）{

divRef.innerHTML = exampleText;

}


现在你去看看textarea的innerHTML。当你做了area.value = exampleText时，你已经设置了这个值，为什么要尝试再设置它？
？ area.value = ...之后的所有内容都是多余的。


还有许多其他复制功能的例子和复杂的

逻辑，这只是一个。例如，你改变下一行

divRef回到inputDiv的引用。


无论如何，继续堵塞，我很有信心现在一切都很清楚。 :-)

-

Rob

Here is the start of your askForInput function with added comments:

function askForInput(introText, exampleText) {
var divRef = getRefToInputDiv();

divRef is a reference to the DIV element with id="inputDiv".
var communicationBoxRef =
document.getElementById("communicationBox");

communicationBoxRef is a reference to a div too.
communicationBoxRef.style.display = "block";
communicationBoxRef.appendChild(divRef);

For some reason you chose to move inputDiv to become a child of cBoxRef,
it could be coded as a child in the first place but maybe there is a
reason. Then you only need to show/hide the outer cBoxRef.
divRef.style.display = "block";
var area = document.getElementsByTagName(''TEXTAREA'')[0];

You get a reference to the text area using getElementsByTagName, but
you''ve given it an ID, so why not use that (as you do a couple of lines
later)? Also, it would be very easy to put the text area into a form,
then pass this.form from the button. Now you can reference the text
area using the form''s elements collection - simpler and easier than
either getElementsByTagName or getElementById.

area.value = exampleText;
This sets the value of the text area to exampleText, nothing further is
required.

var divRef = document.getElementById("inputBox");
Now divRef is overwritten with a reference to the text area element with
id="inputBox", the same element as that referenced by ''area''. area and
divRef refer to the same element, until someone inserts another textarea
element before it.

if (divRef.innerHTML == "" || divRef.innerHTML == undefined) {
divRef.innerHTML = exampleText;
}

Now you go looking at the innerHTML of the textarea. You have already
set the value when you did area.value=exampleText, why try to set it
again? Everything after area.value=... to here is redundant.

There are many other examples of replicated functionality and convoluted
logic, this is just one. For example, the very next line you change
divRef back to being a reference to inputDiv.

Anyhow, keep plugging away, I''m sure it''s all clear as mud right now. :-)
--
Rob

这篇关于当我向innerHTML添加HTML时，FireFox将其呈现为HTML，但IE将其显示为纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！