innerHTML在javascript中做了什么?

Kar*_*mam 25 javascript

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

use*_*716 25

innerHTML属性用于获取或设置HTML 内容的的元素节点.

示例: 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 );
Run Code Online (Sandbox Code Playgroud)

  • @Felix:虽然它是 [HTML5](http://www.w3.org/TR/html5/apis-in-html-documents.html#innerhtml) 的一部分。 (3认同)

Mic*_*rdt 7

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

但是,使用DOM操作innerHTML比基于单个DOM对象的操作更慢且更容易出错.


Sha*_*wat 7

为了理解innerHTML 属性,您首先需要了解javascript 对象和HTML DOM(文档对象模型)的基础知识。我将尝试解释:

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

现在来回答你的问题:

HTML代码:

<p id= "myPara"> We love to Code.</p>
Run Code Online (Sandbox Code Playgroud)

JavaScript 代码:

alert(document.getElementById("myPara").innerHTML);
Run Code Online (Sandbox Code Playgroud)

在这里,document.getElementById("myPara") 将我们的 html 元素作为一个 javascript 对象返回,它具有预定义的属性 innerHTML。innerHTML 属性包含 HTML 标签的内容。

希望这会有所帮助。

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

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


小智 5

innerHTML是每个元素的属性。它告诉您元素的开始和结束标签之间是什么,还可以设置元素的内容。


属性描述对象的一个​​方面。它是对象拥有的东西,而不是对象拥有的东西。


<p id="myParagraph">
This is my paragraph.
</p>
Run Code Online (Sandbox Code Playgroud)

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

document.getElementById("myParagraph").innerHTML = "This is my paragraph";
Run Code Online (Sandbox Code Playgroud)