javascript之innerHTML、outerHTML、innerText的使用——前端复习记录

innerHTML、outerHTML、innerText可以获得document对象的文本内容。

具体区别如下:


<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript测试title>
    <script>
        function myInnerHTML() {
      
            alert(document.getElementById("text1").outerHTML);
        }

        function myOuterHTML() {
      
            alert(document.getElementById("text1").innerHTML);
        }

        function myInnerText() {
      
            alert(document.getElementById("text1").innerText);
        }
    script>
head>
<body>
<h1 id="text1"><p>Hellop><p>Worldp>h1>
<button onclick="myInnerHTML()">outerHTMLbutton>
<button onclick="myOuterHTML()">innerHTMLbutton>
<button onclick="myInnerText()">innerTextbutton>
body>
html>

显示结果:

  • outerHTML:
    javascript之innerHTML、outerHTML、innerText的使用——前端复习记录_第1张图片
  • innerHTML:
    javascript之innerHTML、outerHTML、innerText的使用——前端复习记录_第2张图片
  • innerText:
    javascript之innerHTML、outerHTML、innerText的使用——前端复习记录_第3张图片

1、outerHTML是包括自身起始标签和结束标签在内的所有标签和元素内容
2、innerHTML是除自身起始标签和结束标签的所有标签和元素内容
3、innerText起始标签至结束标间的的所有元素内容
javascript之innerHTML、outerHTML、innerText的使用——前端复习记录_第4张图片

你可能感兴趣的:(前端复习记录,js)