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

以上示例将警告＆＃34; HI！＆＃34;因为$('#div1').data('text')不包含 FreddieBobman，实际上是＃34;你好。这是一个自定义属性。＆＃34;

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

$('#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等于＆＃34;这很酷。＆＃34;，不是＆＃34;你好。这是一个自定义属性。＆＃34;

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

获取属性：

        div.getAttribute('data')

WORKING DEMO

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

使用jquery和javascript，

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

动态存储数据（html5）

5 个答案: