动态存储数据（html5）

Question

我在html中创建一个动态div，它由多个复选框组成。 所有这些复选框和div都被动态添加到html中。 我需要存储一些关于html中每个div的数据，以便稍后通过javascript访问。 有人能告诉我一个例子，可以在div中动态添加和检索数据吗？ 我知道HTML5允许它，还有其他一些黑客可以做到这一点，但我猜我的语法有问题。

Answer 1

这篇文章解释了data- *属性。

您可以在div中创建自定义属性，如下所示：

<div id="div1" data-text="Hello. This is a custom attribute."></div>

注意data-前缀。 这是绝对必要的。 然后（使用jQuery），您可以访问自定义属性：

$('#div1').data('text'); => "Hello. This is a custom attribute."

所以使用这个你可以做的事情：

if($('#div1').data('text') != "FreddieBobman"){
    alert("HI!");
} else {
    alert("Forever Alone!");
}

以上示例将提醒“HI！” 因为$('#div1').data('text')不包含FreddieBobman，它实际上是“Hello。这是一个自定义属性。”

要创建这些属性，请使用以下命令：

$('#div1').attr('data-name', 'value');

id为div1的div现在有另一个属性data-name，属性值为value。 当然，您也可以更改属性的值：

<div id="div1" data-text="Hello. This is a custom attribute."></div>
<script src="jquery.js"></script>
<script>
    (function(){
        $('#div1').attr('data-text', 'This is cool.');
    }());
</script>

现在div的data-text等于“This is cool。”，而不是“Hello。这是一个自定义属性”。

Answer 2

尝试使用JavaScript：

SomeClass.someVariable = document.getElementById('divid');

否则，如果您要访问必须在HTML标记中用作属性的自定义数据，请使用

data-XXX = 'YYY';

并使用JS访问它：

document.getElementById('divid').dataset.XXX;

Answer 3

它是通过动态添加到元素的data attributes获取，并在需要时检索！

SET属性：

        var div = document.createElement('div');
        div.setAttribute('data','my_data');
        div.innerHTML = "I am a div";
        document.body.appendChild(div);

GET属性：

        div.getAttribute('data')

工作演示

Answer 4

您可以使用html标签的属性。 此外，在html5中，您还可以使用自定义属性

Answer 5

你想要的是动态地从div标签添加或检索数据？

使用javascript函数，您只需使用其id获取相应的div元素，

var container = document.getElementById('your_element_id');

然后你可以添加你想要的。

var stringToAdd = "<p>something you want to add</p>";
container.innerHTML = stringToAdd;

您还可以使用具有不同功能的其他类，并将其设置为div类。 您需要在类名下的样式标记内添加功能。 然后，

var elementID = document.getElementById(ID);
elementID.className ="your_new_class_name";

或者您可以设置标签的属性。

elementID.setAttribute('display','inline');

在javascript中使用jquery，

var elementID = document.getElementById(ID);
$(elementID).replaceWith( "<p>something you want to replace</p>" ); 

使用类名或ID，您可以使用动态附加内容，

var stringToAdd = "<p>something you want to add</p>";
$(".your_class_name").append(stringToAdd);

你也可以删除整个元素，

$(elementID).remove();