Question

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

Answer 1

The innerHTML property用于获取或设置元素节点的HTML 内容。

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

Answer 2

innerHTML属性是文档对象模型（DOM）的一部分，它允许Javascript代码操作正在显示的网站。具体来说，它允许读取和替换给定DOM元素（HTML标记）中的所有内容。

然而，使用innerHTML的DOM操作比基于单个DOM对象的操作更慢且更容易出错。

Answer 3

每个HTML元素都有一个innerHTML属性，该属性定义HTML代码和在该元素的开始和结束标记之间出现的文本。通过在一些用户交互之后更改元素的innerHTML，您可以制作更多的交互式页面。

但是，如果您希望能够轻松可靠地使用innerHTML，则需要进行一些准备工作。首先，您必须提供您想要更改ID的元素。使用该ID，您将能够使用适用于所有浏览器的getElementById函数。

Answer 4

您可以收集或设置所选标签的内容。

作为一个伪想法，它类似于在一个房间内有很多盒子，暗示着“ 盒子里面的所有内容”

Answer 5

innerHTML根据id / name获取内容并替换它们。

＆＃13;

<!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>

＆＃13;

单击按钮时，h3中的内容将被innerHTML分配替换，即Date（）。

Answer 6

innerHTML 是每个元素的属性。它告诉您元素的开始和结束标记之间的内容，并且它还允许您设置元素的内容。

属性描述了对象的一个方面。它是对象所拥有的东西，而不是对象所做的事情。

<p id="myParagraph">
This is my paragraph.
</p>

您可以选择段落，然后使用以下命令更改其innerHTML的值：

document.getElementById("myParagraph").innerHTML = "This is my paragraph";

Answer 7

innerHTML的示例说明：

innerHTML处理元素（获取或设置）的HTML内容。在下面的示例中，如果单击更改内容链接，则其值将通过使用锚链接更改内容

的 innerHTML 属性进行更新>

示例：

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

Answer 8

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

Answer 9

每个HTML元素都有一个innerHTML属性，用于定义HTML代码和该元素的开始和结束标记之间出现的文本。通过在一些用户交互之后更改元素的innerHTML，您可以制作更多交互式页面。

但是，如果您希望能够轻松可靠地使用innerHTML，则需要进行一些准备工作。首先，您必须提供您想要更改ID的元素。有了这个ID，您就可以使用适用于所有浏览器的getElementById功能。

完成设置后，您现在可以操作元素的文本。首先，让我们尝试更改粗体标记内的文本。 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'/>

此答案来自here

Answer 10

要了解innerHTML属性，您首先需要了解javascript对象和HTML DOM（文档对象模型）的基础。我将尝试解释：

JavaScript对象由属性和方法组成。
用于呈现HTML文档的Web浏览器创建了一个DOM，在DOM中，每个HTML元素都被视为一个JavaScript对象，它具有一组与之相关的属性和方法。

现在要问您的问题：

HTML代码：

<p id= "myPara"> We love to Code.</p>

JavaScript代码：

alert(document.getElementById("myPara").innerHTML);

在这里，document.getElementById（“ myPara”）将以带有预定义属性innerHTML的javascript对象的形式返回html元素。 innerHTML属性包含HTML标记的内容。

希望这会有所帮助。

您可以在浏览器中运行以下HTML代码来理解它：

<html>
<body>
  <p id= "myPara"> We love to Code.</p>
  <script>
    alert(document.getElementById("myPara").innerHTML);
  </script>
</body>
</html>

Answer 11

它确实按照它所说的去做——它返回指定 HTML 元素的内部内容。最小的自包含演示如下所示：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <script>
      alert(document.getElementById("myElement").innerHTML);
   </script>
   <div id="myElement">
       Hello, world!
   </div>
</body>
</html>

在标签内运行 javascript 代码会弹出一个通知说

<块引用>

“你好，世界！”

innerHTML在javascript中做了什么？

11 个答案: