使用JavaScript在类中更改HTML中的HTML

-1

我试图使用基于提交的信息的类修改HTML。使用JavaScript在类中更改HTML中的HTML

这里是默认元素

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

我希望能够到我的.js文件内改变<h3>和<p>文本，但是，我不知道如何直接修改HTML。

来源

2017-06-21 ICostaEx Designs

然后指出你的JS文件。 – clarkoy

试试这个：

// 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>

来源

2017-06-21 03:54:14

这没有奏效，我可以注意到js文件被添加到login.php文件中，作为 –

谢谢，将js代码封装在window.onload函数中在回答中更正 –

通过类名获取<div>

// 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'

来源

2017-06-21 03:56:07 Phil

让您的元件首先

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>' 
*/

使用element.elements

如果你不想改变这一切的内容或想要对每个元素进行更改（p和h3），您可以使用元素属性，其中代表子元素yourDivElementWithFormLoginError。

// get your h3 element 
var h3Element = yourDivElementWithFormLoginError.elements[0]; 
// change content like this 
h3Element.innerHTML = 'your desire HTML text'; 
// or like this 
h3Element.textContent = 'your desire text' 

// And again 
// get your p element 
var pElement = yourDivElementWithFormLoginError.elements[1]; 
// can change your pElement like h3Element

P.S.你可以改变只能元素中的文本与element.textContent但你可以element.innerHTML

来源

2017-06-21 04:11:07

如果我将js文件作为脚本添加，这项工作是否可行？因为它似乎不工作.....（如何导入.js文件：） –

通过添加.js文件或在

使用JavaScript在类中更改HTML中的HTML

回答

相关问题