Question

我是javascript和html的新手。我想在页面上添加一个按钮，例如＆＃34; A＆＃34;按钮。当我点击A时，我希望清理页面并显示一些新内容，例如文本框或其他内容。

我在互联网上搜索过。我找到的方法，例如document.body.innerHTML=""，将使用我想在单击按钮后显示的新元素清理整个页面，因为我已经加载了所有html元素。它只会清理所有这些。我还试图使用一个单独的html文件并将新的东西放在那里并在我点击按钮后加载它。我试过window.open（＆＃34;我的电脑上文件的路径＆＃34;）。但我认为这不正确，因为我只是打开一个空白页面。

感谢您的帮助。

Answer 1

使用jQuery来实现这个目的。将所有要替换的内容放在单独的“div”中。并替换下面的HTML;

$("button").click(function(){
  $("div").html("Hello <b>world</b>!");
});

您需要导入jQuery，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

嗯，有多种方法可以完成您的任务。假设你的html中已经有了按钮A：

<button name="myButton" onclick="replacePage()">Button A</button>

然后您可以在javascript中创建事件处理函数：

<script>
function replacePage(){
var newElement= "<input type='textbox' name='myTextbox'>";
document.body.innerHTML=newElement;
}
</script>

您也可以使用document.write（）函数替换页面中的所有内容。

您还提到了链接到另一个html文件。做到这一点的方法是通过＆＃34; _self＆＃34;作为window.open（）函数的第二个参数，因此它在同一页面上打开html：

window.open("htmlLink.html", "_self");

Answer 3

你可以说下面的话： -

HTML中的

按钮

<button onclick="changeContent()">Change Content</button>

的Javascript

<script>
    function changeContent(){
        var content = "<input type='textbox' name='myTextbox'>";
        document.write(content);
    }
</script>

Javascript HTML清除所有当前内容并在同一窗口中加载新内容

3 个答案: