JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="test_id1">innerHTML效果.</li>
    <li id="test_id2">innerText效果.</li>
    <li id="test_id3">outerHTML效果.</li>
    <li id="test_id4">outerText效果.</li>
  </ul>

JavaScript

//.innerHTML
    document.getElementById('test_id1').onclick = function innerHTMLDemo()
    {
     test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
    }
    //.innerText
    document.getElementById('test_id2').onclick = function innerTextDemo()
    {
     test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
    }
    //.outerHTML
    document.getElementById('test_id3').onclick = function outerHTMLDemo()
    {
     test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
    }
    //.outerText
    document.getElementById('test_id4').onclick = function outerTextDemo()
    {
     test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
    }