JS獲取包含當前節點本身的代碼內容(outerHtml)

 

原生JS DOM的內置屬性 outerHTML 可用來獲取當前節點的html代碼(包含當前節點)，且此屬性可使用jQuery的prop()獲取

<div id="demo-test-01"><p>Hello World !!!</p></div>
<script>
  $(function () {
    let _html_demo;
    //jQuery
    _html_demo = $('#demo-test-01').prop('outerHTML');//返回結果：<div id="demo-test-01"><p>Hello World !!!</p></div>
    console.log(_html_demo);

    //js
    let _obj_demo = document.getElementById('test');
    _html_demo = _obj_demo.outerHTML;
    console.log(_html_demo);
  });
</script>

 

也可使用jquery改變節點的html內容

<input id="demo-test-02" type="text">
<script>
  $(function () {
    $('#demo-test-02').prop('outerHTML', '<div id="demo-test-01"><p>Hello World !!!</p></div>');
  });
</script>