如何使用JavaScript在浏览器中手动生成控制台返回结果？

你所说的是浏览器运行DOM查询接口后返回的DOM元素实例对象，完全支持手动写入内容，常见的写入场景和操作方法如下：

修改元素文本内容 #

使用textContent属性写入纯文本，写入的内容会自动转义特殊字符，不会被解析为HTML标签，无注入风险：

const elem = document.getElementById('目标元素ID');
elem.textContent = '你需要写入的纯文本内容';

修改元素HTML结构 #

如果需要写入带HTML标签的内容，可以使用innerHTML属性：

const elem = document.getElementById('目标元素ID');
elem.innerHTML = '<div class="custom-node">自定义的HTML内容</div>';

注意：如果写入内容来自用户输入，使用innerHTML存在XSS跨站脚本注入风险，非必要场景不推荐使用

修改元素属性 #

可以直接对元素的内置属性、自定义属性赋值：

const elem = document.getElementById('目标元素ID');
// 修改内置属性
elem.id = 'new-element-id';
elem.className = 'custom-class';
// 修改自定义属性
elem.setAttribute('data-tag', '自定义标记内容');

直接修改控制台临时返回结果 #

如果你没有把查询结果赋值给变量，Chromium、Firefox的控制台会默认将最后一次输出的DOM元素绑定到临时变量$0，可以直接调用该变量修改内容：

// 运行document.getElementById查询后直接执行
$0.textContent = '直接修改控制台返回的元素内容';

内容的提问来源于stack exchange，提问作者gurkensaas