Question

我正在尝试根据提交的信息修改HTML。

这是默认元素

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

我希望能够更改.js文件中的<h3>和<p>文本，但是，我不确定如何直接修改HTML。

Answer 1

试试这个：

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

Answer 2

按类名

获取<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'

Answer 3

首先获取您的元素

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 ），您可以使用 elements 属性来表示 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

添加或更改HTML内容（而不仅仅是文本）

Answer 4

您可以使用Uri shortLink = task.getResult().getShortLink(); Uri flowchartLink = task.getResult().getPreviewLink();更改HTML。这是我的示例代码：

HTML

innerHTML

的JavaScript

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

或者如果您愿意，可以使用JQuery

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

在我的示例中，我将h3Text和pText $("#h3Text").text("Text..."); $("#pText").text("Text...");添加到您的id和h3，以便稍后我可以通过访问它们来在JavaScript或JQuery中更改它们p。

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

4 个答案: