设置javascript变量的Ajax响应覆盖了任何html元素

Ajax response which sets javascript variable covers up any html elements

本文关键字：任何 html 元素 覆盖 响应 javascript 变量 Ajax 设置      更新时间：2023-09-26

有这样的方法吗？我的ajax设置了一个javascript变量，但当我尝试使用document.write显示它时，它覆盖了html元素。可以这样做吗？这样我就可以使用javascript变量而不掩盖html元素了？提前谢谢。

<html>
<head>
<title>Log In</title>
<!-- script tag for ajax jquery -->
<link href='style.css' type="text/css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function()
              {
              //Get Data ajax function 
              $.post(
                     'getData.php',
                     {
                     },                                           
                     function(response)
                     {
                     $('#name').html($('#1' , response).html());
                     $('#sname').html($('#2' , response).html()); 
                     var x = $('#1' , response).html();
                     document.write(x);
                     })
              return false;
              })
</script>
</head>
<body>
<div id="name"></div>
<div id="sname"></div>
this is text that get covered up, as well as any other html elements 

</body>
</html>

document.write主要用于页面加载期间的。在响应事件时，可以通过createElement、appendChild等函数修改DOM；或类似CCD_ 4的特性。

例如，如果您想将x的内容附加为div中的标记，而不是

document.write(x);

你可以这样做：

var div = document.createElement('div');
div.innerHTML = x;
document.body.appendChild(div);

如果您想找到已经在DOM中的元素并对其进行修改，则可以使用document.getElementById（如果它有ID）或document.getElementsByTagName（两者都是DOM2的一部分）或（在大多数但不是所有当前浏览器上）从选择器API获得具有给定标记的元素列表（querySelector和querySelectorAll）。

更多阅读：

  • DOM2核心规范
  • DOM2 HTML规范
  • DOM3核心规范
  • HTML5 Web应用程序API
  • API 1级选择器

因此，既然您使用的是jQuery，就不应该使用document.write，因为其他人已经强调了这些原因。使用这个替代：

$(document).ready(function()
          {
          //Get Data ajax function 
          $.post(
                 'getData.php',
                 {
                 },                                           
                 function(response)
                 {
                 $('#name').html($('#1' , response).html());
                 $('#sname').html($('#2' , response).html()); 
                 var x = $('#1' , response).html();
                 // Use .append() instead of document.write()
                 $('body').append(x);
                 })
          return false;
          })

这样就不会丢失任何现有数据。

相关文章：