Javascript 使用jquery方法insertBefore在单击链接时插入html代码

我正在用php开发一个类似facebook的社交网站。我有一个页面，用于显示用户的消息，该页面有两个链接，即收件箱中每个消息的右下角的

回复

和

删除

。我的问题是，当我点击回复链接时，另一个html块应该会出现，用户可以将回复发送回发件人

<div class="msgutil">
   <a href="" id="reply" onclick="return post_reply()" >reply</a>//this method does'nt works

   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a> //dont check this
</div><!--end msgutil-->

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
 </script>

<script type="text/javascript">
function post_reply()
 {
    $("<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield"    id="replyfield"></textarea> </form>").insertBefore("#reply");
return true;
 }
 </script>

//这个方法不行
//不要检查这个

我已经像这样在post_reply（）中插入了html文档

<div class="msgutil">
   <a href="" id="reply" onclick="return post_reply()" >reply</a>//this method does'nt works

   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a> //dont check this
</div><!--end msgutil-->

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
 </script>

<script type="text/javascript">
function post_reply()
 {
    $("<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield"    id="replyfield"></textarea> </form>").insertBefore("#reply");
return true;
 }
 </script>

函数post_reply（）
{
$（“”）之前插入（#答复）；
返回true；
}

---

我不知道为什么它不起作用。

您在用双引号组成的字符串中使用了双引号。无法执行此操作，因为您会再次结束和启动字符串

或者用单引号将其括起来：

$('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
//^                                                                                                              ^

$("<form id=\"msgreply\" name=\"msgreply\" action=\"#\"> <textarea name=\"replyfield\" id=\"replyfield\"></textarea></form>").insertBefore("#reply");
//          ^         ^       ^         ^         ^  ^                  ^           ^     ^           ^

$（“”）.insertBefore（“#回复”）；
//^                                                                                                              ^

或转义双引号：

$('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
//^                                                                                                              ^

$("<form id=\"msgreply\" name=\"msgreply\" action=\"#\"> <textarea name=\"replyfield\" id=\"replyfield\"></textarea></form>").insertBefore("#reply");
//          ^         ^       ^         ^         ^  ^                  ^           ^     ^           ^

$（“”）之前插入（“#回复”）；
//          ^         ^       ^         ^         ^  ^                  ^           ^     ^           ^

您还可以使用以下HTML：

<div class="msgutil">
   <a href="#" id="reply">reply</a>
   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a>
</div><!--end msgutil-->

以及以下javascript：

$(document).ready(function() {
    $("#reply").click(function(e) {
        $('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
        e.stopPropagation();
        e.preventDefault();
    });
});​

$（文档）.ready（函数（）{
$（“#回复”）。单击（功能（e）{
$（“”）.insertBefore（“#答复”）；
e、 停止传播（）；
e、 预防默认值（）；
});
});​

得到同样的结果

---

在由双引号组成的字符串中使用双引号。无法执行此操作，因为您会再次结束和启动字符串

或者用单引号将其括起来：

$('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
//^                                                                                                              ^

$("<form id=\"msgreply\" name=\"msgreply\" action=\"#\"> <textarea name=\"replyfield\" id=\"replyfield\"></textarea></form>").insertBefore("#reply");
//          ^         ^       ^         ^         ^  ^                  ^           ^     ^           ^

$（“”）.insertBefore（“#回复”）；
//^                                                                                                              ^

或转义双引号：

$('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
//^                                                                                                              ^

$("<form id=\"msgreply\" name=\"msgreply\" action=\"#\"> <textarea name=\"replyfield\" id=\"replyfield\"></textarea></form>").insertBefore("#reply");
//          ^         ^       ^         ^         ^  ^                  ^           ^     ^           ^

$（“”）之前插入（“#回复”）；
//          ^         ^       ^         ^         ^  ^                  ^           ^     ^           ^

您还可以使用以下HTML：

<div class="msgutil">
   <a href="#" id="reply">reply</a>
   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a>
</div><!--end msgutil-->

以及以下javascript：

$(document).ready(function() {
    $("#reply").click(function(e) {
        $('<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield" id="replyfield"></textarea></form>').insertBefore("#reply");
        e.stopPropagation();
        e.preventDefault();
    });
});​

$（文档）.ready（函数（）{
$（“#回复”）。单击（功能（e）{
$（“”）.insertBefore（“#答复”）；
e、 停止传播（）；
e、 预防默认值（）；
});
});​

得到同样的结果

---

我认为您应该采用更好的方法使用jQuery，如下所示：

HTML:

<div class="msgutil">
   <a href="" id="reply">reply</a>

   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a>
</div><!--end msgutil-->​

$("#reply").click(function(e){
    e.preventDefault();
    var formHtml = '<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield"    id="replyfield"></textarea> </form>';
    $(this).before(formHtml);
});

​

jQuery:

<div class="msgutil">
   <a href="" id="reply">reply</a>

   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a>
</div><!--end msgutil-->​

$("#reply").click(function(e){
    e.preventDefault();
    var formHtml = '<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield"    id="replyfield"></textarea> </form>';
    $(this).before(formHtml);
});

$（“#回复”）。单击（功能（e）{
e、 预防默认值（）；
var formHtml=''；
$（此）.before（formHtml）；
});

---

​

我认为您应该采用更好的方法使用jQuery，如下所示：

HTML:

<div class="msgutil">
   <a href="" id="reply">reply</a>

   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a>
</div><!--end msgutil-->​

$("#reply").click(function(e){
    e.preventDefault();
    var formHtml = '<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield"    id="replyfield"></textarea> </form>';
    $(this).before(formHtml);
});

​

jQuery:

<div class="msgutil">
   <a href="" id="reply">reply</a>

   <a href="delete_message.php?msg_id=<?php echo $row_msg_id;?>">delete</a>
</div><!--end msgutil-->​

$("#reply").click(function(e){
    e.preventDefault();
    var formHtml = '<form id="msgreply" name="msgreply" action="#"> <textarea name="replyfield"    id="replyfield"></textarea> </form>';
    $(this).before(formHtml);
});

$（“#回复”）。单击（功能（e）{
e、 预防默认值（）；
var formHtml=''；
$（此）.before（formHtml）；
});

---

​

@AnazA您的javascript控制台中出现了什么错误（如果有）？我已经用一个JSFIDLE更新了我的示例。当我检查回复链接时，我看到加载资源失败的错误：服务器以404（未找到）的状态响应我正在获取DOM异常also@AnazA如果javascript控制台中有错误，会出现什么错误？我已经用一个JSFIDLE更新了我的示例。当我检查回复链接时，我看到加载资源失败的错误：服务器以404（未找到）的状态响应，我也得到了DOM异常