[已解决]怎么在title里显示原代码而不被解析

Sorawithcat

这里是部分代码

<div id="dad1">
            <div id="baby1">X</div>
            <h1>广告</h1>
        </div>
    </div>
    <script>
        const baby1 = document.querySelector("#baby1")
        baby1.addEventListener("click", function () {
            baby1.parentNode.style.display = "none"
        })
        baby1.onmouseover = function () {
            this.title = this.innerHTML
        }
    </script>

我想悬停在baby1元素上时显示其节点的所有代码。试过innerTEXT，也是只显示文本。

最佳答案

月排行榜 / 总排行榜

FishC

2024-2-11 09:25:31

要在title中显示元素的原始代码，可以使用innerText属性，但是需要进行一些调整。innerText属性会将元素及其子元素的文本内容作为一个字符串返回。

在你的代码中，你使用了innerText，但是你只能得到元素的文本内容，因此无法获取元素的 HTML 代码。要获取整个元素的原始 HTML 代码，你可以使用outerHTML属性。

下面是修改后的代码示例：

const baby1 = document.querySelector("#baby1");
baby1.addEventListener("click", function () {
    baby1.parentNode.style.display = "none";
});
baby1.onmouseover = function () {
    this.title = this.outerHTML; // 将元素的原始 HTML 代码赋值给title
};

现在，当你悬停在baby1元素上时，title将显示该元素的完整HTML代码。注意，在HTML代码中可能包含特殊字符（如尖括号"<"和">"），所以在显示之前，浏览器会将这些字符进行转义。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

要在title中显示元素的原始代码，可以使用innerText属性，但是需要进行一些调整。innerText属性会将元素及其子元素的文本内容作为一个字符串返回。

在你的代码中，你使用了innerText，但是你只能得到元素的文本内容，因此无法获取元素的 HTML 代码。要获取整个元素的原始 HTML 代码，你可以使用outerHTML属性。

下面是修改后的代码示例：

const baby1 = document.querySelector("#baby1");
baby1.addEventListener("click", function () {
    baby1.parentNode.style.display = "none";
});
baby1.onmouseover = function () {
    this.title = this.outerHTML; // 将元素的原始 HTML 代码赋值给title
};

现在，当你悬停在baby1元素上时，title将显示该元素的完整HTML代码。注意，在HTML代码中可能包含特殊字符（如尖括号"<"和">"），所以在显示之前，浏览器会将这些字符进行转义。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

Sorawithcat

FishC 发表于 2024-2-11 09:25
要在title中显示元素的原始代码，可以使用innerText属性，但是需要进行一些调整。innerText属性会将元素及 ...

那我怎么给页面内所有元素都添加这个效果呢

FishC

Sorawithcat 发表于 2024-02-11 09:50
那我怎么给页面内所有元素都添加这个效果呢

要给页面内所有元素都添加这个效果，你需要遍历整个文档中的所有元素，并为每个元素添加相应的事件处理程序。下面是一个示例代码：const elements = document.body.getElementsByTagName("*"); // 获取页面内所有元素for (let i = 0; i < elements.length; i++) {    const element = elements[i];    element.onmouseover = function () {        this.title = this.outerHTML; // 在悬停时显示元素的原始 HTML 代码    };}在这个代码中，我们使用document.body.getElementsByTagName("*")获取页面内所有的元素，然后使用循环遍历每个元素，并为其添加onmouseover事件。在事件处理程序中，我们将元素的outerHTML赋值给title属性，这样在悬停时就可以显示元素的原始 HTML 代码了。请注意，这会给页面中的每个元素都添加事件处理程序，如果页面非常大，可能会导致性能问题，所以在实际应用中需要根据需要进行适当的优化。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。