javascript 中的innerHTML 在做什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4879066/
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
what innerHTML is doing in javascript?
提问by Kareem Nour Emam
Can anyone tell me what innerHTML is doing in javascript and give me example how I can use it?
谁能告诉我innerHTML 在javascript 中做了什么，并举例说明如何使用它？
回答by user113716
The innerHTMLpropertyis used to get or set the HTML contentof an elementnode.
该innerHTML属性用于获取或设置HTML内容的的元素节点。
Example:http://jsfiddle.net/mQMVc/
示例：http : //jsfiddle.net/mQMVc/
// get the element with the "someElement" id, and give it new content
document.getElementById('someElement').innerHTML = "<p>new content</p>";
// retrieve the content from an element
var content = document.getElementById('someElement').innerHTML;
alert( content );
回答by Michael Borgwardt
The innerHTMLproperty is part of the Document Object Model (DOM) that allows Javascript code to manipulate a website being displayed. Specifically, it allows reading and replacing everything within a given DOM element (HTML tag).
该innerHTML属性是文档对象模型 (DOM) 的一部分，允许 Javascript 代码操作正在显示的网站。具体来说，它允许读取和替换给定 DOM 元素（HTML 标签）中的所有内容。
However, DOM manipulations using innerHTMLare slower and more failure-prone than manipulations based on individual DOM objects.
但是，innerHTML与基于单个 DOM 对象的操作相比，使用 DOM 操作更慢且更容易失败。
回答by shar10ckq
innerHTMLis a property of every element. It tells you what is between the starting and ending tags of the element, and it also let you sets the content of the element.
innerHTML是每个元素的属性。它告诉你元素的开始和结束标签之间是什么，它还让你设置元素的内容。
propertydescribes an aspect of an object. It is something an object has as opposed to something an object does.
属性描述了对象的一个方面。它是一个对象所拥有的东西，而不是一个对象所做的东西。
<p id="myParagraph">
This is my paragraph.
</p>
You can select the paragraph and then change the value of it's innerHTML with the following command:
您可以选择该段落，然后使用以下命令更改其 innerHTML 的值：
document.getElementById("myParagraph").innerHTML = "This is my paragraph";
回答by asx
Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
每个 HTML 元素都有一个 innerHTML 属性，该属性定义了 HTML 代码以及出现在该元素的开始和结束标记之间的文本。通过在一些用户交互之后更改元素的innerHTML，您可以制作更多交互页面。
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
但是，如果您希望能够轻松可靠地使用 innerHTML，则需要一些准备工作。首先，您必须给要更改 ID 的元素。有了这个 id，您就可以使用 getElementById 函数，该函数适用于所有浏览器。
回答by asx
The innerHTML fetches content depending on the id/name and replaces them.
innerHTML 根据 id/name 获取内容并替换它们。
<!DOCTYPE html>
<html>
<head>
<title>Learn JavaScript</title>
</head>
<body>
<button type = "button"
onclick="document.getElementById('demo').innerHTML = Date()"> <!--fetches the content with id demo and changes the innerHTML content to Date()-->
Click for date
</button>
<h3 id = 'demo'>Before Button is clicked this content will be Displayed the inner content of h3 tag with id demo and once you click the button this will be replaced by the Date() ,which prints the current date and time </h3>
</body>
</html>When you click the button,the content in h3 will be replaced by innerHTML assignent i.e Date() .
当您单击按钮时，h3 中的内容将被innerHTML 赋值即 Date() 替换。
回答by Shashank Rawat
For understanding innerHTML property you first need to go through the basics of the javascript object and HTML DOM(Document object model).I will try to explain:
要理解innerHTML 属性，您首先需要了解javascript 对象和HTML DOM（文档对象模型）的基础知识。我将尝试解释：
- JavaScript objects consist of properties and methods.
- for rendering HTML document web browser creates a DOM, in DOM every HTML element is treated as a JavaScript Object which has a set of properties and methods associated with it.
- JavaScript 对象由属性和方法组成。
- 为了呈现 HTML 文档，Web 浏览器创建了一个 DOM，在 DOM 中，每个 HTML 元素都被视为一个 JavaScript 对象，它具有一组与之关联的属性和方法。
Now coming to your Question:
现在来回答你的问题：
HTML code:
HTML代码：
<p id= "myPara"> We love to Code.</p>
JavaScript code:
JavaScript 代码：
alert(document.getElementById("myPara").innerHTML);
here, document.getElementById("myPara") will return our html element as a javascript object which has pre-defined property innerHTML. innerHTML property contains the content of HTML tag.
在这里，document.getElementById("myPara") 将我们的 html 元素作为一个 javascript 对象返回，它具有预定义的属性 innerHTML。innerHTML 属性包含 HTML 标签的内容。
Hope this will help.
希望这会有所帮助。
You can run following HTML code in your browser to understand it:
您可以在浏览器中运行以下 HTML 代码来理解它：
<html>
<body>
<p id= "myPara"> We love to Code.</p>
<script>
alert(document.getElementById("myPara").innerHTML);
</script>
</body>
</html>
回答by Asad Manzoor
innerHTML explanation with example:
innerHTML 解释示例：
The innerHTML manipulates the HTML content of an element(get or set). In the example below if you click on the Change Contentlink it's value will be updated by using innerHTMLproperty of anchor link Change Content
innerHTML 操作元素的 HTML 内容（获取或设置）。在下面的示例中，如果您单击更改内容链接，它将使用锚链接更改内容的innerHTML属性更新其值
Example:
例子：
<a id="example" onclick='testFunction()'>Change Content</a>
<script>
function testFunction(){
// change the content using innerHTML
document.getElementById("example").innerHTML = "This is dummy content";
// get the content using innerHTML
alert(document.getElementById("example").innerHTML)
}
</script>
回答by Glycerine
You can collect or set the content of a selected tag.
您可以收集或设置选定标签的内容。
As a Pseudo idea, its similar to having many boxes within a room and imply the idea 'everything within thatbox'
作为伪想法，它与具有一个房间内的许多盒，并暗示的想法“内的一切是盒子”
回答by user3414373
Each HTMLelement has an innerHTMLproperty that defines both the HTMLcode and the text that occurs between that element's opening and closing tag. By changing an element's innerHTMLafter some user interaction, you can make much more interactive pages.
每个HTML元素都有一个innerHTML属性，用于定义HTML代码和出现在该元素的开始和结束标记之间的文本。通过innerHTML在一些用户交互之后更改元素，您可以制作更具交互性的页面。
However, using innerHTMLrequires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementByIdfunction, which works on all browsers.
但是，innerHTML如果您希望能够轻松可靠地使用它，则需要一些准备工作。首先，您必须给要更改 ID 的元素。有了这个 id，您就可以使用该getElementById功能，该功能适用于所有浏览器。
After you have that set up you can now manipulate the text of an element. To start off, let's try changing the text inside a bold tag.
JavaScriptCode:
完成设置后，您现在可以操作元素的文本。首先，让我们尝试更改粗体标签内的文本。
JavaScript代码：
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
This answer is from here
这个答案来自这里
回答by Alain Pannetier
It represents the textual contents of a given HTML tag. Can also contain tags of its own.
它表示给定 HTML 标签的文本内容。也可以包含自己的标签。
