jQuery append方法插入文本而非HTML

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>

这个Fiddle

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

- arman

Answer 1

之所以会出现这种情况是因为tempat[0]访问的是底层DOM节点而不是jQuery包装器。如果省略数组访问并直接在tempat上调用append，它就可以正常工作。

在此处您不需要使用，但获取jQuery选择器列表的jQuery包装元素的正确方式是使用eq

- dtanders

---

我刚刚意识到，之前我使用了next()方法。因为一开始我只使用了parent()方法，所以它返回了许多对象。顺便说一下，谢谢，现在它可以正常工作了。 - arman

Answer 2

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

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

$(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>

- gyre

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);
        });
      });

我希望我能够帮到您！

- Geander

Answer 4

删除 [0]。这样做会取消引用您的 jQuery 对象。

这个可以工作：tempat.append('<input type="text"></input>');

- Chip Dean