innerHTML在javascript中做什么?

时间:2022-11-17 11:11:17

Can anyone tell me what innerHTML is doing in javascript and give me example how I can use it?

谁能告诉我innerHTML在javascript中做了什么,并举例说明我如何使用它?

8 个解决方案

#1


12  

The innerHTML property is used to get or set the HTML content of an element node.

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 );

#2


4  

The innerHTML property 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 innerHTML are slower and more failure-prone than manipulations based on individual DOM objects.

然而,使用innerHTML的DOM操作比基于单个DOM对象的操作更慢,更容易失败。

#3


3  

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的元素。

#4


2  

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 that box'

作为一种伪概念,它类似于一个房间里有许多个盒子,并暗示着“盒子里的所有东西”

#5


2  

The innerHTML fetches content depending on the id/name and replaces them.

innerHTML获取内容取决于id/名称并替换它们。

<!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 assignent i替换。e日期()。

#6


0  

It represents the textual contents of a given HTML tag. Can also contain tags of its own.

它表示给定HTML标记的文本内容。也可以包含自己的标签。

#7


0  

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的元素。

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. JavaScript Code:

设置好之后,现在可以操作元素的文本。首先,让我们尝试在粗体标记中更改文本。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

答案就在这里。

#8


0  

innerHTML is 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是每个元素的属性。它告诉您元素的开始和结束标记之间有什么,还允许您设置元素的内容。


property describes 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";

#1


12  

The innerHTML property is used to get or set the HTML content of an element node.

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 );

#2


4  

The innerHTML property 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 innerHTML are slower and more failure-prone than manipulations based on individual DOM objects.

然而,使用innerHTML的DOM操作比基于单个DOM对象的操作更慢,更容易失败。

#3


3  

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的元素。

#4


2  

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 that box'

作为一种伪概念,它类似于一个房间里有许多个盒子,并暗示着“盒子里的所有东西”

#5


2  

The innerHTML fetches content depending on the id/name and replaces them.

innerHTML获取内容取决于id/名称并替换它们。

<!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 assignent i替换。e日期()。

#6


0  

It represents the textual contents of a given HTML tag. Can also contain tags of its own.

它表示给定HTML标记的文本内容。也可以包含自己的标签。

#7


0  

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的元素。

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. JavaScript Code:

设置好之后,现在可以操作元素的文本。首先,让我们尝试在粗体标记中更改文本。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

答案就在这里。

#8


0  

innerHTML is 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是每个元素的属性。它告诉您元素的开始和结束标记之间有什么,还允许您设置元素的内容。


property describes 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";