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>