Question

我想在我的html页面中附加输入文字。我使用JQuery来做到这一点。

我的JQuery脚本：

$(document).ready(function(){
    $(".reply").click(function(){
      var tempat=$(this).parent().parent().next(".komentar-balasan");
      console.log(tempat[0]);
      var html=
      tempat[0].append('<input type="text"></input>');
    });
  });

HTML：

 <div class="isi">
    <div class="like-comment">
     <div class="kotak"></div>
     <div class="kotak-jumlah">
     </div>
     <div class="kotak"><button class="reply"></button></div>
   </div><div class="komentar-balasan"></div>

The Fiddle

我不知道为什么，而是显示输入文本框。浏览器只显示<input type="text"></input>。这就像浏览器无法识别HTML代码。

Answer 1

因为tempat[0]正在访问底层DOM节点而不是jQuery包装器。如果省略数组访问权限并且只需在append上调用tempat，它就可以正常工作。

你不需要它，但是获取jQuery选择器列表的jQuery包装元素的正确方法是使用eq

Answer 2

问题是你没有调用jQuery对象上的append元素（将字符串视为HTML），而是调用本机DOM元素。实验ParentNode#append方法将字符串视为文本，因此您可以看到文本。

如果在调用[0]之前省略append，则代码运行完美：

$(document).ready(function() {
  $("#post-komentar").click(function() {
    console.log($(this).siblings('.editor-komentar').val());
  });
  $(".reply").click(function() {
    var tempat = $(this).parent().parent().next(".komentar-balasan");
    console.log(tempat[0]);
    var html =
      tempat.append('<input type="text"></input>');
  });
});

.reply {
  background-color: #fff;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="isi">
  <div class="like-comment">
    <div class="kotak">&lt;</div>
    <div class="kotak-jumlah">
    </div>
    <div class="kotak"><button class="reply"></button></div>
  </div>
  <div class="komentar-balasan"></div>

Answer 3

您好，

检查这是否符合您的要求：

您需要创建一个元素，然后才能添加它。

这是一个例子：

      $(document).ready(function(){
        $(".reply").click(function(){
          var tempat=$(this).parent().parent().next(".komentar-balasan");
          console.log(tempat[0]);
          var newEl = document.createElement('input');
          newEl.type = "text";
          tempat.append(newEl);
        });
      });

我希望我有所帮助！

Answer 4

删除[0]。您可以通过这种方式取消引用您的jQuery对象。

这有效：tempat.append('<input type="text"></input>');

jQuery追加方法插入文本而不是HTML

4 个答案: