zoukankan      html  css  js  c++  java
  • innerHTML、outerHTML、innerText的用法和特点

    <div id="box">
    <div>
    <div>55</div>
    </div>
    </div>
    下面说下innerHTML,outerHTML,innerText的用法:

    如下的js代码:
    如果用innerHTML的话!
    <script>
    var box = document.getElementById("box");
    alert(box.innerHTML)
    </script>

    就会弹出
    <div>
    <div>55</div>
    </div>

    如果用outerHTML的话!
    <script>
    var box = document.getElementById("box");
    alert(box.outerHTML)
    </script>

    就会弹出
    <div id="box">
    <div>
    <div>55</div>
    </div>
    </div>

    如果用innerText的话!
    <script>
    var box = document.getElementById("box");
    alert(box.innerText)
    </script>

    就会弹出
    55

    这样就很清楚的看出了这三个的用法和特点:
    innerHTML会选中除了id="box"以外的所有里面的节点和元素;
    outerHTML会选中连带本身的所有的节点和元素;
    innerText会选中元素里面的内容。

    <script>
    var box = document.getElementById("box");
    box.innerHTML = "<b>" + 5 + "</b>";
    </script>
    代表将id="box"里面的所有元素替换成<b>5</b>,所以执行完上面的js代
    码之后,html中是这样的:
    <div id="box">
    <b>5</b>
    </div>

    打开网页会显示一个加粗的5;

    <script>
    var box = document.getElementById("box");
    box.outerHTML = "<b>" + 5 + "</b>";
    </script>
    代表将id="box"本身及里面的所有元素替换成<b>5</b>

    打开网页同样是会显示一个加粗的5;但现在执行完上面的js代码之后,
    html中是这样的:
    <b>5</b>

    <script>
    var box = document.getElementById("box");
    box.innerText = "<b>" + 5 + "</b>";
    </script>
    代表将id="box"里面的所有元素替换成<b>5</b>

    打开网页同样是会显示<b>5</b>;因为执行完上面的js代码之后,html中
    是这样的:
    <div id="box">
    <b>5</b>
    </div>
    注意此时的<b>5</b>不是作为一个标签存在的,它是作为id="box"标签中
    的文本内容出现的!!!

  • 相关阅读:
    windows环境下生成ssh keys
    手写简易Ajax-结合Promise
    Microsoft 登陆微软账号一直加载不进去 解决方案整理
    win10如何开启卓越性能
    win10开启上帝模式
    解决网页禁止复制文字
    module 'sklearn' has no attribute 'svm'
    sklearn的SVM的decision_function_shape的ovo和ovr
    Can not squeeze dim[1], expected a dimension of 1
    python/numpy随机选取训练集/测试集索引
  • 原文地址:https://www.cnblogs.com/hr2014/p/3642350.html
Copyright © 2011-2022 走看看