请帮助我完成 HTML 和 Javascript 任务

Question

我正在尝试从 HTML 文档中提取类和 ID。<textarea class="output"></textarea>我希望在单击“提交”按钮时显示结果。

HTML：

  <div id="fullwidth">

    <div id="wrapper">

      <div id="content">

        <div class="fifty">

          <textarea class="input">

            <div class="font step_footer">

              <div class="container">

                <div class="font-in">

                  <ul class="d-flex flex-wrap">

                    <li class="col-md-3 col-4">

                      <div class="font-list">

                        <p>Notre équipeM<br> reconnus<br>obtient<br>istance</p>

                      </div>

                    </li>

                  </ul>

                </div>

              </div>

            </div>

          </textarea>

          <div id="button-div">

            <button id="button">Submit</button>

          </div>

        </div>

        <div class="fifty">

          <textarea class="output"></textarea>

        </div>

      </div>

    </div>

  </div>

javascript:

  const main = () => {

    console.log(emptyInnerHTML(document.body))

  }

  

  const emptyInnerHTML = (element) => {

    return renderHTML(describeHTML(element)).innerHTML

  }

  

  const describeHTML = (node) => {

    return ({

      tagName: node.tagName,

      id: node.id || undefined,

      classList: [...node.classList],

      children: [...node.childNodes]

        .filter(child => child.nodeType != Node.TEXT_NODE && child.tagName !== 'SCRIPT')

        .map(child => describeHTML(child))

    })

  }

  

  const renderHTML = (tree) => {

    let node = document.createElement(tree.tagName)

    if (tree.id) node.setAttribute('id', tree.id)

    if (tree.classList && tree.classList.length) node.className = tree.classList.join(' ')

    if (tree.children && tree.children.length) {

      tree.children.forEach(child => node.appendChild(renderHTML(child)))

    }

    return node

  }

  

  main()

检查 Codepen Console 选项卡时就会出现结果。我为它创建了一个 Codepen 页面。您可以在此 Codepen 链接中看到它： https ://codepen.io/coderco/pen/BajJMav 我想在单击“提交”按钮时将其作为结果。

Answer 1

工作代码！！观察右侧的输出textarea，单击submit按钮后，您将能够看到与当前加载时看到的相同结果。const main = () => {&nbsp; document.getElementById("resultArea").value = emptyInnerHTML(document.body);};const emptyInnerHTML = (element) => {&nbsp; return renderHTML(describeHTML(element)).innerHTML;};const describeHTML = (node) => {&nbsp; return {tagName: node.tagName,id: node.id || undefined,classList: [...node.classList],children: [...node.childNodes]&nbsp; .filter(&nbsp; &nbsp; (child) =>&nbsp; &nbsp; &nbsp; child.nodeType != Node.TEXT_NODE && child.tagName !== "SCRIPT"&nbsp; )&nbsp; .map((child) => describeHTML(child))&nbsp; };};const renderHTML = (tree) => {&nbsp; let node = document.createElement(tree.tagName);&nbsp; if (tree.id) node.setAttribute("id", tree.id);&nbsp; if (tree.classList && tree.classList.length)node.className = tree.classList.join(" ");&nbsp; if (tree.children && tree.children.length) {tree.children.forEach((child) => node.appendChild(renderHTML(child)));&nbsp; }&nbsp; return node;};const onSubmit = () => {&nbsp; main();};#fullwidth {&nbsp; width: 100%;&nbsp; display: inline-block;&nbsp; font-family: Arial;}#wrapper {&nbsp; margin: 0 auto;&nbsp; width: 1100px;}#content {&nbsp; width: 100%;&nbsp; display: inline-block;}.fifty {&nbsp; width: 50%;&nbsp; float: left;&nbsp; padding: 5px;&nbsp; box-sizing: border-box;}.input,.output {&nbsp; width: 100%;&nbsp; height: 200px;&nbsp; border: 1px solid #ccc;&nbsp; border-radius: 9px;&nbsp; padding: 10px;&nbsp; box-sizing: border-box;}#button-div {&nbsp; width: 100%;&nbsp; display: inline-block;}#button {&nbsp; float: right;&nbsp; width: 125px;&nbsp; height: 50px;&nbsp; border-radius: 9px;&nbsp; border: 1px solid #db4907;&nbsp; background: #ec350b;&nbsp; color: #fff;&nbsp; font-size: 18px;&nbsp; text-transform: uppercase;}#button:hover {&nbsp; color: #000;}<div id="fullwidth">&nbsp; <div id="wrapper">&nbsp; &nbsp; <div id="content">&nbsp; &nbsp; &nbsp; <div class="fifty">&nbsp; &nbsp; &nbsp; &nbsp; <textarea class="input"><div class="font step_footer"><div class="container"><div class="font-in"><ul class="d-flex flex-wrap"><li class="col-md-3 col-4"><div class="font-list"><img src="/img/font-img1.png" width="145" alt="img"><p>Notre équipeM<br> reconnus<br>obtient<br>istance</p></div></li></ul></div></div></div></textarea>&nbsp; &nbsp; &nbsp; &nbsp; <div id="button-div">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="button" type="submit" onclick="onSubmit()">Submit</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="fifty">&nbsp; &nbsp; &nbsp; &nbsp; <textarea id="resultArea" class="output"></textarea>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

<div&nbsp;id="button-div"> &nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;id="button"&nbsp;type="submit">Submit</button> </div>