Question

是否可以使用Javascript或HTML来更改HTML内容？

例如，我有

<HTML>
<head>
<title>Hello!</title>
</head>

<body>
Click the button below to go to page two.
<button type="button" onclick="gotopage2">Click Me!</button>
</body>
</html>

我试图将其转到点击按钮的位置，页面变为：

<HTML>
<head>
<title>Hello!</title>
</head>

<body>
Welcome to page 2!
</body>
</html>

这样，用户只需单击按钮即可在不加载新页面的情况下更改页面。就像在视频游戏中进入一所房子一样。

这适用于我正在制作的迷你网络应用，因此当用户点击图标时，它会将它们带到描绘图像和文本正文的新屏幕。

Answer 1

我们可以使用innerHTML属性来更改html元素值，使用以下代码示例。

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Welcome to page 2!";
}
</script>

<HTML>
<head>
<title>Hello!</title>
</head>

<body id="demo">
Click the button below to go to page two.
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>

Answer 2

如果您要更换大量内容或多页值得，可以使用Jquery的.load()将内容替换为其他文件：

HTML

<div class="content">
  Click the button below to go to page two.
  <button type="button" class="replace">Click Me!</button>
</div>

CSS

$(".replace").click(function(){
  $(".content").load( "file.html" );
});

否则你可以将文本放在变量中并像这样交换：

$(".replace").click(function(){
  var text = "Welcome to page 2!"
  $(".content").html(text);
});

FIDDLE

或者，如果你想要一个纯粹的Javascript解决方案，你可以像Manu K M那样使用innerHTML。

Answer 3

试试这个

＆＃13;

function load_html() {
  $("html").html("<head><title>Hello!</title></head><body>Welcome to page 2!</body></html>");
  //or another file then use
  //$( "html" ).load( "/resources/load.html html" );
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<HTML>

<head>
  <title>Hello!</title>
</head>

<body>
  Click the button below to go to page two.
  <button type="button" onclick="load_html()">Click Me!</button>
</body>

</html>

＆＃13;

Answer 4

试试这个，你只需要你身体的身份证，你的onclick功能应该是 onclick =“gotopage2（）”而不是 onclick =“gotopage2”

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body id = 'newPage'>
Click the button below to go to page two.
<button type="button" onclick="gotopage2()">Click Me!</button>
<script>
function gotopage2() 
{
var text = "Welcome to page 2!"
$("#newPage").html(text);
}
</script>


</body>
</html>

我可以用JS或HTML替换屏幕吗？

4 个答案: