demo1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple DOM example</title>
    <style>
        .highlight{
            color:red ;
            background-color: black;
            padding: 10px;
            width: 250px;
            text-align: center;
        }
    </style>
  </head>
  <body>
      <section>
        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
      </section>

      <script>

          var sect = document.querySelector('section');
          var para = document.createElement('p');
          para.textContent ='哈哈哈';
          sect.appendChild(para);
        //   para.style.backgroundColor = 'red';
          var text = document.createTextNode('hhahahahhah');
          var linkPara = document.querySelector('p');
          linkPara.appendChild(text);
            para.setAttribute('class','highlight')
            // sect
            sect.cloneNode(linkPara);

            // sect.removeChild(linkPara);

        //    linkPara.parentNode.removeChild(linkPara)

        //   var link = document.querySelector('a');
        //   link.textContent = 'Mozilla Developer Network';
        //   link.href = 'https:www.baidu.com'
      </script>
  </body>
</html>