Свойство JavaScript innerHTML
innerHTML
Свойство используется для записи динамических (время работы) HTML на HTML документа.
С помощью этого свойства элемента можно изменить даже после полной загрузки веб-страницы.
JavaScript innerHTML
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript innerHTML </title>
</head>
<body>
<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>
</body>
</html>Выход
Щелкните меня, чтобы изменить мой HTML-контент (innerHTML).
В приведенном ниже примере
innerHTML
свойство используется для изменения свойств ссылки, таких как цвет, URL-адрес и цель.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript innerHTML Change Link </title>
</head>
<body>
<a id="myAnchor" href="http://www.Youtube.com">Youtube</a>
<button onclick="myFunction()">Change link</button>
<script>
function myFunction() {
document.getElementById("myAnchor").innerHTML = "CodeRepublics";
document.getElementById("myAnchor").href = "/";
document.getElementById("myAnchor").target = "_blank";
}
</script>
</body>
</html>Выход
Свойство JavaScript innerText
innerText
Свойство используется для записи динамического (время работы) текст на HTML документа.
Он в основном используется на веб-страницах для написания сообщения проверки, надежности пароля и т. Д.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript innerText </title>
</head>
<body>
<script>
function validate() {
var msg;
if(document.myFunction.userPass.value.length==5){
msg="Normal Password";
}
else if(document.myFunction.userPass.value.length>=5){
msg="Strong Password";
}
else{
msg="Weak Password";
}
document.getElementById('mylocation').innerText=msg;
}
</script>
<form name="myFunction">
<h3>Enter Password:</h3>
<input type="password" value="" name="userPass" onkeyup="validate()">
Strength: <span id="mylocation">No strength</span>
</form>
</body>
</html>