Javascript 使用javascript在div标签之间设置内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8396590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
setting content between div tags using javascript
提问by Pranay Rana
I'm trying to set some content in between some div tags on a JSP page using javascript.
我正在尝试使用 javascript 在 JSP 页面上的某些 div 标签之间设置一些内容。
currently the div tag on the JSP page looks like this:
目前 JSP 页面上的 div 标签如下所示：
<div id="successAndErrorMessages"></div>
I want to fill the content in those div tags using some javascript method so that it will look like so:
我想使用一些 javascript 方法填充这些 div 标签中的内容，使其看起来像这样：
<div id="successAndErrorMessages"><div class="portlet-msg-error">This is an error message</div></div>
I know you can go like this:
我知道你可以这样：
document.getElementById("successAndErrorMessages").value="someContent";
But that just changes the value of the 'value' attribute. It doesn't fill in content between those div tags. Anyone out there that can point me in the right direction?
但这只是改变了 'value' 属性的值。它不会填充这些 div 标签之间的内容。任何人都可以指出我正确的方向？
回答by Pranay Rana
Try the following:
请尝试以下操作：
document.getElementById("successAndErrorMessages").innerHTML="someContent";
msdn link for detail : innerHTML Property
详细的 msdn 链接：innerHTML 属性
回答by Quentin
See Creating and modifying HTMLat what used to be called the Web Standards Curriculum.
请参阅过去称为Web 标准课程的创建和修改 HTML。
Use the createElement, createTextNodeand appendChildmethods.
使用createElement,createTextNode和appendChild方法。
回答by otembajelle
If the number of your messages is limited then the following may help. I used jQuery for the following example, but it works with plain js too.
如果您的消息数量有限，那么以下内容可能会有所帮助。我在下面的例子中使用了 jQuery，但它也适用于普通的 js。
The innerHtml property did not work for me. So I experimented with ...
innerHtml 属性对我不起作用。所以我尝试了...
<div id=successAndErrorMessages-1>100% OK</div>
<div id=successAndErrorMessages-2>This is an error mssg!</div>
and toggled one of the two on/off ...
并打开/关闭两者之一......
$("#successAndErrorMessages-1").css('display', 'none')
$("#successAndErrorMessages-2").css('display', '')
For some reason I had to fiddle around with the ordering before it worked in all types of browsers.
出于某种原因，在它适用于所有类型的浏览器之前，我不得不摆弄排序。
