innerHTML

2023年07月05日

柏拉文

越努力，越幸运

一、认识

---

element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。

二、语法

---

const content = element.innerHTML;


element.innerHTML = htmlString;

三、返回值

---

DOMString 包含元素后代的 HTML 序列。设置元素的 innerHTML 将会删除所有该元素的后代并以上面给出的 htmlString 替代。

四、应用场景

---

4.1 HTMLDivElement To String

HTMLDivElement To String 子节点

function nodeToString(className) {
    let targetNode = document.querySelector(className);
    let tempNode = targetNode.cloneNode(true);
    const targetNodeStr = tempNode.innerHTML;
    const targetNodeClass = tempNode.className;
    tempNode = targetNode = null;
    return targetNodeStr;
}

HTMLDivElement To String 自身及子节点

function nodeToString(className) {
    let targetNode = document.querySelector(className);
    let tempNode = document.createElement('div');
    tempNode.appendChild(targetNode.cloneNode(true));
    const targetNodeStr = tempNode.innerHTML;
    tempNode = targetNode = null;
    return targetNodeStr;
}