当您使用浏览器的开发工具对站点进行更改时，元素选项卡会更新吗？

Question

注意：我正在使用 Chrome 的开发工具。

我使用控制台在 header 下创建了一个部分。

在控制台的开发工具下，我输入：

var Europe = document.createElement('section');
// undefined
Europe
// <section></section>
Europe.setAttribute('id', 'europe')

当我转到“元素”选项卡时，根本看不到该部分。

如果我更新 .js 文件，保存它，然后重新加载浏览器，这会导致元素树发生变化吗？

我正在研究一些 DOM 硬件，这真的让我很为难。

.js 文件：

console.log("test");

var citizens = ['Anka', 'Wallace', 'Pierre', 'Juan'];

var cuisines = ['French', 'English', 'Spanish', 'Russian'];

var body = document.querySelector('body');

function makeLocation() {
}

Answer 1

您似乎缺少将新 Element 插入 DOM 的代码。您可以使用函数 .insertAdjacentElement 将新 section 添加到 DOM，在 header 之后，如下所示：

// ... after your code creating the variable Europe

let header = document.getElementsByTagName('header')[0];

header.insertAdjacentElement('afterend', Europe);

在您运行这段代码之后，您应该会看到新的 section 出现在开发人员工具的“元素”选项卡中 - 您还应该会看到它出现在页面上。

注意： 如果您在 chrome 中单击 'Refresh'，您在 chrome 开发者工具中所做的任何更改都将被删除，因为浏览器将再次从源代码中提取代码。

希望对您有所帮助！

当您使用浏览器的开发工具对站点进行更改时，元素选项卡会更新吗？

When you make changes to a site using the browser's dev tools, does the elements tab update?

javascript

dom

devtools

getelementbyid

google-chrome-devtools