使用带有JavaScript的类更改div内的HTML

我正试图根据提交的信息用一个类修改HTML

这里是默认元素

<div class="form-login-error">
    <h3>Invalid password</h3>
    <p>You have submitted an invalid password.</p>
</div>

无效密码
您提交的密码无效

我希望能够更改.js文件中的

和

文本，但是，我不确定如何直接修改HTML。

尝试以下操作：

// if you want to place js code in separate file then import file to your html file 
window.onload = function () {
   var div = document.querySelector('.form-login-error');

   div.querySelector('h3').innerText = 'your h3 text'
   div.querySelector('p').innerText = 'your paragraph text'
}

<div class="form-login-error">
<h3>Invalid password</h3>
<p>You have submitted an invalid password.</p>
</div>

//如果要将js代码放在单独的文件中，请将该文件导入html文件
window.onload=函数（）{
var div=document.querySelector（“.form登录错误”）；
div.querySelector（'h3'）。innerText='您的h3文本'
div.querySelector（'p'）.innerText='您的段落文本'
}
无效密码
您提交的密码无效

按类名获取

 // this will get the first element with this class
const div = document.querySelector('.form-login-error')

然后可以像这样访问子元素及其内容

div.querySelector('h3').textContent = 'Something else'
div.querySelector('p').textContent = 'Some more detail'

---

首先获取您的元素

var elementsWithClassName = document.getElementsByClassName('form-login-error');
// get your div element
var yourDivElementWithFormLoginError = elementsWithClassName[0];

使用element.innerHTML

// use innerHTML
yourDivElementWithFormLoginError.innerHTML = '<i>your desired text</i>';
/*
 Your element's current innerHTML is 
 '<h3>Invalid password</h3><p>You have submitted an invalid password.</p>'
*/

---

另外，您只能使用元素更改元素内部的文本。textContent但是您可以使用元素添加或更改HTML内容（不仅仅是文本）。innerHTML您可以使用

innerHTML

更改HTML。以下是我的示例代码：

// use innerHTML
yourDivElementWithFormLoginError.innerHTML = '<i>your desired text</i>';
/*
 Your element's current innerHTML is 
 '<h3>Invalid password</h3><p>You have submitted an invalid password.</p>'
*/

HTML

如果您愿意，也可以使用JQuery

$("#h3Text").text("Text...");
$("#pText").text("Text...");

---

在我的示例中，我将h3Text和pText

id

添加到您的

h3

和

p

中，以便稍后通过

id

访问它们来在JavaScript或JQuery中更改它们，指明您的JS文件。这不起作用，请注意，JS文件已添加到login.php文件中，谢谢，将js代码包装在window.onload函数中，如回答中所更正的，如果我将js文件作为脚本添加，这是否有效？因为它似乎不起作用。。。。。（我是如何导入.js文件的：）通过添加.js文件或在其中写入，两者都应该可以正常工作。可能是uour代码在加载元件之前起作用。在事件函数中编写逻辑。

document.getElementById("h3Text").innerHTML = "Text...";
document.getElementById("pText").innerHTML = "Text...";

$("#h3Text").text("Text...");
$("#pText").text("Text...");