innerHTML、innerText、outerHTML、outerText的區別 - PiaoMiaoGongZi－IT工程師數位筆記本

文章出處

我們在用JS/JQ 獲取或設置元素內容的時候，通常是獲取或設置指定元素之間的內容

<script>
    //JS
    document.getElementById('test').innerHTML="設置元素內容";
    //JQ
    $("#test").val("設置元素內容");
</script>

但是如果我們需要獲取包含元素本身的內容的時候就會變得很麻煩，這時候用outerHTML便可以輕松解決問題了。

原HTML為：

<div id="test"><span>替換前</span></div>

1、innerHTML

運行腳本

<script type="text/javascript" lang="javascript">
    //JS
    document.getElementById('test').innerHTML = "<div>替換后</div>";
    //JQ
    $("#test").val("<div>替換后</div>");
    //或者
   $("#test").prop("innerHTML ","<div>替換后</div>");
</script>

原HTML變為：

<div id="test"><div>替換后</div></div>

2、innerText

運行腳本

<script type="text/javascript" lang="javascript">
    //JS
    document.getElementById('test').innerText= "<div>替換后</div>";
    //JQ
    $("#test").text("<div>替換后</div>");
    //或者
   $("#test").prop("innerText","<div>替換后</div>");
</script>

原HTML變為：

<div id="test">&gt;div&lt;替換后&gt;/div&lt;</div>

3、outerHTML

運行腳本

<script type="text/javascript" lang="javascript">
    //JS
    document.getElementById('test').outerHTML = "<div>替換后</div>";
    //JQ
   $("#test").prop("outerHTML","<div>替換后</div>");
</script>

原HTML變為：

<div>替換后</div>

4、outerText

運行腳本

<script type="text/javascript" lang="javascript">
    //JS
    document.getElementById('test').outerText= "<div>替換后</div>";
    //JQ
   $("#test").prop("outerText","<div>替換后</div>");
</script>

原HTML變為：