在不直接访问 HTML 的情况下更改 HTML 文本

Question

我正在网站构建器中构建网站，但我想更改当网站表单中的某些必填字段未填写时出现的默认消息。 我所指的表单是网站构建器本身的一个元素。

有什么方法可以更改 HTML 文本而无需直接访问它？

我可以将代码添加到<head> ，但我不相信它会更改现有代码。

我想更改的段落是这样的：

<div data-v-3a756488=""><p data-v-3a756488="" class="input__error-message z-body-small"> Esse campo é obrigatório </p></div>

我正在研究使用 CSS 的一些可能的即兴解决方案，其中之一是隐藏 HTML 中出现的文本并将另一个文本放入 CSS 的content中，但我知道这不是最好的方法。

我有可能使用 CSS、HTML 和 JavaScript，该站点在<head>和嵌入的代码元素中接受这些语言中的任何一种。

Answer 1

首先，您添加一个eventListener以检查是否所有 DOM 元素都已加载window.addEventListener('load', ...然后选择要更改的元素。在这种情况下，我将段落定位为具有数据属性的希望这是具有该数据属性的唯一元素： document.querySelector('p[data-v-3a756488=""]') 。然后我在该元素上使用textContent替换文本：

 window.addEventListener('load', function() { let ele = document.querySelector('p[data-v-3a756488=""]'); let text = 'This is the replaced Text'; ele.textContent = text; })

 <div data-v-3a756488=""><p data-v-3a756488="" class="input__error-message z-body-small"> Esse campo é obrigatório </p></div>

如果您想要替换文本的元素不止 1 个，您还可以使用具有相同方法的数组和对象。 然后，您只需创建一个对象数组，在其中列出要定位的元素和要替换的文本。 然后，您可以使用for循环来应用对象数组中定义的所有更改：

 window.addEventListener('load', function() { const replace = [ { element: 'p[data-v-3a756488=""]', text: 'replaced text of the first element' }, { element: 'p[data-v-3a756500=""]', text: 'replaced text of the second element' }, { element: 'p[data-v-6a756488=""]', text: 'replaced text of the third element' } ]; for (let i = 0; i < replace.length; i++) { let ele = document.querySelector(`${replace[i].element}`), text = replace[i].text; ele.textContent = text; } })

 <div data-v-3a756488=""><p data-v-3a756488="" class="input__error-message z-body-small"> This is Element 1 </p></div> <div data-v-3a756500=""><p data-v-3a756500="" class="input__error-message z-body-small"> This is Element 2 </p></div> <div data-v-6a756488=""><p data-v-6a756488="" class="input__error-message z-body-small"> This is Element 3 </p></div>

在不直接访问 HTML 的情况下更改 HTML 文本

问题描述

1 个解决方案

解决方案1
0 2022-07-20 22:00:44

在不直接访问 HTML 的情况下更改 HTML 文本

问题描述

1 个解决方案

解决方案1 0 2022-07-20 22:00:44

解决方案1
0 2022-07-20 22:00:44