要对 appendChild 方法进行 hook 并将入参输出为 HTML 文本，可以通过重写原生的 appendChild 方法来实现。这可以在 JavaScript 中完成，以下是一个简单的示例：
// 保存原始的 appendChild 方法
const originalAppendChild = Node.prototype.appendChild;
// 重写 appendChild 方法
Node.prototype.appendChild = function(child) {
// 输出 child 的 HTML 表示
console.log('Appending:', child instanceof Node ? child.outerHTML || child.nodeName : child);
// 调用原始方法以保持功能
return originalAppendChild.call(this, child);
};
// 测试代码
const div = document.createElement('div');
div.textContent = 'Hello World';
document.body.appendChild(div); // 控制台将输出: Appending: <div>Hello World</div>
解释：
- 保存原始方法：首先，将
Node.prototype.appendChild保存到一个变量中，以便后续调用。 - 重写方法：我们定义了新的
appendChild方法，在该方法内部，我们打印出传入的参数。如果参数是一个节点对象（如元素），我们使用其outerHTML属性来获取其 HTML 文本；如果不是，则直接输出。 - 调用原始方法：最后，通过
call来调用原始的appendChild方法，确保功能不受影响。
这种方式允许你在调试或开发时监控哪些节点被添加到 DOM 中。
内容由零声教学AI助手提供，问题来源于学员提问
