JavaScript:用另一个HTML中的内容替换元素

JavaScript: Replace element with content from another HTML

本文关键字：替换 元素 另一个 HTML JavaScript      更新时间：2023-09-26

我想解决以下问题:给定网页上的链接，我想将指定的div元素的内容替换为另一个页面的div元素的内容。比如说，从Google Scholar页面加载文本"站在巨人的肩膀上"到我现有的div元素中。

最新的，如果实现如下示例:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="http://www.whatsmyip.org/">Click me</a>
<div id="myid">Text to be replaced</div>
<script type="text/javascript">
    $("a").click(function() {
      $.get(this.href, function(data) {
        $("#myid").replaceWith($(data).find("#fb-root"));
      });
      previous_page = location.href;
      window.history.pushState({page: $(this).index()}, $(this).html(), $(this).attr('href'));
      return false;
    });
    window.onpopstate = function(event) {
      location.reload();
    }
</script>
</body>
</html>

我包含window.history是为了更改位置栏中的URL，并允许用户在没有新内容的情况下恢复Web页面的先前状态。

现在我有两个问题:

  • 替换<code>div</code>元素似乎不起作用，因为从WhatIsMyIP加载整个页面。
  • 使用Chrome时，整个页面从一开始就一次又一次地重新加载。我想，事件window.onpopstate是连续触发的。

谢谢你的帮助!

您可以在超链接上组合click和$.load:

$('a').click(function(e){
    $('#myid').load($(this).attr('href'));
    e.preventDefault(); //needed to prevent navigation!
});

如果想在页面中添加一个特殊元素，可以附加任何选择器。例子:

 $('#myid').load($(this).attr('href') + ' div');

这将添加所请求页面的所有div。

关于你的第一个问题

试试这个

$('#myid').load(this.href + ' #fb-root');

而不是

$.get(this.href, function(data) {
    $("#myid").replaceWith($(data).find("#fb-root"));
});

尝试在return false;之前添加event.preventDefault()

如果我理解正确的话，您只是想将page1上指定的div元素的内容(在本例中div元素的ID为"myid")替换为来自page2 (page2是http://www.whatsmyip.org/)的div元素的内容。

希望这可能会有所帮助:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="http://www.whatsmyip.org/">Click me</a>
<div id="myid">Text to be replaced</div>
<script type="text/javascript">
$("a").click(function() {
  $.get(this.href, function(data) {
    var target_element_id_page2 = "element_id_page2";
    var target_element_type_page2 = "div";
    var respond= $('<div>' + data + '</div>');//You forgot this... It won't work unless you use it...
    var target_element = respond.find( target_element_type_page2 + '#'+ target_element_id_page2 )[0]; //There "might" be more div elements with the same id: that's why you specify index
    var container = document.getElementById( "myid");
    container.innerHTML = target_element.innerText;
    }, "html");
</script>
</body>
</html>

我去掉了window.history. pushstate和window。Onpopstate，以更好地回答您的问题，没有任何错误，这两个代码可能会给。如果你把这些放回去，它就会正常工作。虽然我不明白你为什么使用"previous_page = location.href;"． Previous_page没有声明，之后也没有使用它。

相关文章：