Javascript 如何在AJAX加载的页面中更改html

我正在使用AJAX将一个PHP页面加载到一个名为“DIV1”的div中，它创建了表的一部分，在另一个名为“directions”的div中，我希望能够更改“directions”div的内容，但似乎找不到它？是因为它是动态的吗？我已经尝试了好几件事，并将举例说明，但我错在哪里呢

AJAX加载的代码是

$(document).ready(function(){
    $(".mainstuff button").click(function(){
        $('#loader').show();
        status = $(this).attr("data-name");
        var new_url = "get_job_details3.php?job_id="+status;
        //alert(status);
        $("#div1").load(new_url);           
    });
});

PHP中生成表的部分，其中“directions”div如下所示：

echo "<input style='display:none' id='p_lat' type='text' value='".$p_lat."'><input style='display:none' id='p_lng' type='' value='".$p_lng."'><input style='display:none' id='d_lat' type='text' value='".$d_lat."'><input style='display:none' id='d_lng' type='' value='".$d_lng."'><table class='mainTable'>
<tbody>
<tr>


<td width='50%' style='vertical-align: top'><li>Vehicle required : <B>".$vehicle_required."</B></li>$r<li>Pick up time : <B>".$new_date."</B></li><li>Pick up time : <B>".$p_time."</B></li><li>Pick up address : <B>".$p_address."</B></li><li>Destination address : <B>".$d_address."</B></li><li>Return date : <B>".$d_date_new."</B></li><li>Return time : <B>".$d_time."</B></li><li>Number of passengers : <B>".$pax."</B></li><li>Estimated distance : <B>".$est_dist."</B></li><li>Estimated time : <B>".$est_time."</B></li><li></li><div id='mymap'><li><button id='show_map' style='margin-right:10px' type='button' class='btn btn-success'><span class='glyphicon glyphicon-map-marker'></span> SHOW ON MAP </button><button id='show_directions' data-toggle='collapse' data-target='#directions' type='button' class='btn btn-success'><span class='glyphicon glyphicon-map-marker'></span> SHOW DIRECTIONS </button><div id='directions' class='collapse'>Lorem ipsum dolor text....</div></li></td>
<td width='50%' id='description'><li>Purpose : <B>".$purpose."</B></li><li>Extra requirements : <B>".$list."</B></li><li>Notes : <B>".$notes."</B></li><li>Total current bids : <B>".$total_bids."</B></li><li>Current lowest bid : <B>£".$lowest_bid_price."</B></li><li>Your bids on this job : <B>".$your_bids."</B></li><li>Your current lowest bid : <B>£".$my_lowest_bid."</B></li><li>Make a new bid of : £<input id='bid_amount' type='text'><li><textarea id='extras' class='extras' placeholder='Enter any information you would like the customer to know'></textarea></li><li><button id='make_bid' data-name='".$job_id."' type='button' class='btn btn-bid'><span class='glyphicon glyphicon-pencil'></span> MAKE BID </button><button type='button' style='float:right' class='btn btn-success' onclick='closedown()'><span class='glyphicon glyphicon-remove-circle'></span> CLOSE </button></li></td>
</tr>
</tbody>
</table>";

directionsDisplay.setPanel(document.getElementById('#div1 .mainTable directions'));

从“方向”到上面的内容，我都试过了。我做错了什么

提前感谢

不接受css选择器，因为它的名称暗示它只接受id字符串。您可能打算使用一个css选择器。注意：您的

方向

部件实际上是一个id选择器

document.querySelector('#div1 .mainTable #directions')
//or just
document.querySelector("#directions")

但如果您实际上打算使用getElementById，则只需传递元素的id字符串：

document.getElementById("directions")

---

正如Patrick提到的，

getElementById

需要修复。但这也取决于运行代码的时间。为了确保在服务器调用完成后运行

setPanel

代码，可以将其放入（加载完成后运行）

---

编辑：

我不知道您的

setPanel

方法做什么，但是

document.getElementById（'directions'）

应该能够在加载运行后获取插入的div

如果您只想更改其内容，可以执行以下操作：

document.getElementById('directions').innerHTML = "some new text";

---

如果要将id为“directions”的div作为目标，则代码无效。它应该是

directionsDisplay.setPanel（document.getElementById（'directions'）。。。请注意，在加载新页面后需要调用该代码。我知道，但是如果我只是想更改DIV中的文本，该怎么办？我还是找不到它？？
document.getElementById('directions').innerHTML = "some new text";