Javascript 如何使用JQuery更改加载页面的innerHTML_Javascript_Jquery_Html

Javascript 如何使用JQuery更改加载页面的innerHTML

javascript jquery html

Javascript 如何使用JQuery更改加载页面的innerHTML,javascript,jquery,html,Javascript,Jquery,Html,我希望jquery使用类“ToChange”更改块内的文本。它在当前html文件中运行良好，但在外部html文件（我使用“load”方法插入）中不起作用。这是我的密码： index.html: <!DOCTYPE html> <html lang="en"> <head> <title>Home page</title> <script src="jquery-3.1.1.js">&l

我希望jquery使用类“ToChange”更改块内的文本。它在当前html文件中运行良好，但在外部html文件（我使用“load”方法插入）中不起作用。这是我的密码：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<script src="jquery-3.1.1.js"></script>
<script> 
   $(function(){
      $('.insert_external').load("external.html"); 
   });
</script>
<script> 
    $(function(){
        length = document.getElementsByClassName("ToChange").length;
        for (i = 0; i < length; i++) {
            document.getElementsByClassName("ToChange")[i].innerHTML = "New Text";
        }
    });
</script>
</head>

<body>
<div class="insert_external"></div>

<div class="ToChange">
    This changes fine
</div>
<div class="ToChange">
    This changes fine too
</div>
</body>
</html>

<div class="ToChange">
    This text does not change :(
</div>


主页
$（函数（）{
$（'.insert_external'）.load（“external.html”）；
});
$（函数（）{
长度=document.getElementsByClassName（“ToChange”）.length；
对于（i=0；i


external.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<script src="jquery-3.1.1.js"></script>
<script> 
   $(function(){
      $('.insert_external').load("external.html"); 
   });
</script>
<script> 
    $(function(){
        length = document.getElementsByClassName("ToChange").length;
        for (i = 0; i < length; i++) {
            document.getElementsByClassName("ToChange")[i].innerHTML = "New Text";
        }
    });
</script>
</head>

<body>
<div class="insert_external"></div>

<div class="ToChange">
    This changes fine
</div>
<div class="ToChange">
    This changes fine too
</div>
</body>
</html>

<div class="ToChange">
    This text does not change :(
</div>


此文本不会更改：(

结果我看到了3个字符串：

此文本不会更改：(
新文本
新文本
我希望它们都是“新文本”。是否可以仅使用html和js与jquery一起执行此操作？
更新文本的函数在实际加载新内容之前运行，因为加载函数是异步工作的。您应该等待新数据加载完毕。为此，请使用.load（）的回调函数-函数。
更新文本的函数在实际加载新内容之前运行，因为加载函数是异步工作的。您应该等待新数据加载完毕。为此，请使用.load（）函数的回调。
尝试类似的操作
<script> 
   $(function(){
      $('.insert_external').load("external.html",function(){
           setText();
   }); 
   });
</script>

<script> 
    $(function(){
        function setText(){
           length = document.getElementsByClassName("ToChange").length;
           for (i = 0; i < length; i++) {
               document.getElementsByClassName("ToChange")[i].innerHTML = "New Text";
           }
        }
    });
</script>


$（函数（）{
$（'.insert_external'）.load（“external.html”，function（））{
setText（）；
}); 
});
$（函数（）{
函数setText（）{
长度=document.getElementsByClassName（“ToChange”）.length；
对于（i=0；i

您只需在完成时设置回调函数。
试试类似的方法
<script> 
   $(function(){
      $('.insert_external').load("external.html",function(){
           setText();
   }); 
   });
</script>

<script> 
    $(function(){
        function setText(){
           length = document.getElementsByClassName("ToChange").length;
           for (i = 0; i < length; i++) {
               document.getElementsByClassName("ToChange")[i].innerHTML = "New Text";
           }
        }
    });
</script>


$（函数（）{
$（'.insert_external'）.load（“external.html”，function（））{
setText（）；
}); 
});
$（函数（）{
函数setText（）{
长度=document.getElementsByClassName（“ToChange”）.length；
对于（i=0；i

您只需在完成时设置回调函数。
您必须更改load（）
回调中的html，以便新数据在这里，否则它将在旧DOM中更改，因为JS是异步工作的
您必须等待.load（）
完成请求：
$('.insert_external').load("external.html", function() {
    length = document.getElementsByClassName("ToChange").length;
    for (i = 0; i < length; i++) {
        document.getElementsByClassName("ToChange")[i].innerHTML = "New Text";
    }
});

希望这有帮助。
您必须更改load（）
回调中的html，以便新数据在这里，否则它将在旧DOM中更改，因为JS是异步工作的
您必须等待.load（）
完成请求：
$('.insert_external').load("external.html", function() {
    length = document.getElementsByClassName("ToChange").length;
    for (i = 0; i < length; i++) {
        document.getElementsByClassName("ToChange")[i].innerHTML = "New Text";
    }
});

希望这有帮助。
Javascript异步工作。您的替换函数将在加载函数之前完成，因此它将显示旧文本。使用.load（）
函数的完成回调来运行您的函数（再次）.Javascript异步工作。替换函数将在加载函数之前完成，因此它将显示旧文本。使用.load（）
函数的complete
回调来运行函数（再次）。谢谢。顺便说一句，“.each”函数也非常有用。谢谢。顺便说一句，“.each”函数也非常有用。