我正在尝试从 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 我想在单击“提交”按钮时将其作为结果。
慕哥6287543
慕勒3428872