jQuery append 方法插入文本而不是 HTML答案

【问题标题】：jQuery append method inserting text rather than HTMLjQuery append 方法插入文本而不是 HTML
【发布时间】：2017-08-24 17:50:12
【问题描述】：

我想在我的 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 代码一样。

【问题讨论】：

标签： javascript jquery html append

【解决方案1】：

问题是您没有在 jQuery 对象（将字符串视为 HTML）上调用 append 元素，而是在原生 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>

【讨论】：

【解决方案2】：

删除 [0]。你这样做是在取消引用你的 jQuery 对象。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您好，

检查一下这是不是您需要的：

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

这是一个例子：

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

希望对我有所帮助！

【讨论】：