Javascript jQuery data（）无法写入HTML元素？

HTML:

正在正确检索

catid

，但未将其添加到输入元素中。为什么会这样？我该如何解决这个问题？

如果希望

数据在DOM中可见，则需要使用

注意：
catid
不是“允许的”属性。您应该编写
数据catid


$（“.add new item”）。单击（函数（）{
var catid=$（this.data（“catid”）；
$（“.modal”）.show（）；
$（“.search input”）.attr（“数据catid”，catid）；//请参见此行中的更改
});

添加新项目
未添加到输入元素
正确，这不是
.data（）
的工作方式。使用
.data（）
添加数据时，数据存储在jquery内部，因此您可以通过jquery再次读取数据，而不是通过查看html或使用普通javascript读取数据

初始值将从任何匹配的
数据-
属性中读取，但之后将使用内部值

例如：


$（“.add new item”）。单击（函数（）{
var catid=$（this.data（“catid”）；
$（“.search input”）.data（“catid”，catid）；
});
$（“.readdata”）。单击（函数（）{
console.log（$（“.search input”）.data（）
})

读取数据
添加数据
读取数据
$（“.search input”）.attr（“数据catid”，catid）.data（）
不是这样工作的。您可以添加数据，但您可以通过再次调用data（）来读取数据，而不是查看html。可能是重复的和Ok，这是可行的，但jQuery文档特别声明不要混淆attr（）和data（）。关于data（）方法不起作用的原因有什么线索吗？如果我正确地阅读了文档，它应该是。它确实起作用，但你不理解它实际上在做什么。根据你的其他评论，我想我现在明白它的作用了。但是jQuery将从HTML中检索数据，而不是将其写入HTML，这似乎非常令人困惑。@Pim更新了答案。希望现在一切都清楚了。它确实有效。但它不会更新HTML。如果要更新HTML，请使用
.attr（）
<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").data("catid", catid);
});