使用HTML标签存储“ javascript的数据”吗？

Question

我需要用占位符写一些html用于javascript。

例如：

<span><placeholder data-id="42" data-value="abc"/><span>

稍后，脚本将访问这些占位符并将内容放入（旁边？）它们中。

<span><placeholder data-id="42" data-value="abc"><div class="Google"><input type="text" value="abc"/></div><span>

但是占位符标记不存在。 可以使用什么标签？ 全面使用<input type =“ hidden” ... />感觉不对。

Answer 1

创建自定义标签

var xFoo = document.createElement('placeholder');
xFoo.innerHTML = "TEST";
document.body.appendChild(xFoo);

输出：

<placeholder>TEST</placeholder>

DEMO

注意：但是，创建具有唯一ID的隐藏输入字段是一种好习惯。

Answer 2

给您的span元素一个id，

<span id="placeToAddItem"><span>

然后在jQuery中

$('#placeToAddItem').html('<div class="Google"><input type="text" value="abc"/></div>');

要不然

var cloneDiv = $('.Google');
$('#placeToAddItem').html(cloneDiv);

例

Answer 3

最好的方法是使用<input type='hidden' id="someId" value="">标记。 然后，您可以使用jQuery轻松访问它们，并调用或更改变量。 var value = $("#someId").val(); 获取变量或$("#someId").val(value)进行更改。

Answer 4

此完整的jQuery解决方案不允许您将占位符/替换html指定为要替换的元素内的字符串。

EG HTML：

<div data-placeholder="<div class='Google'><input type='text' value='abc'/></div>"></div>
<div data-placeholder="<div class='Boogle'><input type='text' value='def'/></div>"></div>
<div data-placeholder="<div class='Ooogle'><label>with label <input type='text' value='ghi'/></label></div>"></div>
<span data-placeholder="<em>Post JS</em>">Pre JS</span>
<br />
<button id="test">click me</button>

JS：

使用querySelectorAll选择具有“数据占位符”属性的所有元素（返回NodeList）

var placeholders = document.querySelectorAll('[data-placeholder]'); //or by ids, classnames, element type etc

用一个简单的“ each”方法扩展NodeList原型，该方法允许我们遍历列表。

NodeList.prototype.each = function(func) {
    for (var i = 0; i < this.length; i++) {
        func(this[i]);
    }
    return this;//return self to maintain chainability
};

用'replaceWith'方法扩展Object原型，该方法用html字符串创建的新元素替换元素：

Object.prototype.replaceWith = function(htmlString) {
    var temp = document.createElement('div');//create a temporary element
        temp.innerHTML = htmlString;//set its innerHTML to htmlString
    var newChild = temp.childNodes[0];//(or temp.firstChild) get the inner nodes
        this.parentNode.replaceChild(newChild, this);//replace old node with new
    return this;//return self to maintain chainability
};

放在一起：

placeholders.each(function(self){
   self.replaceWith(self.dataset.placeholder);//the 'data-placeholder' string
});

另一个示例，但是在这里，我们仅在单击时用一些硬编码的html替换一个特定的元素：

document.getElementById("test").addEventListener('click', function() {
   this.replaceWith("<strong>i was a button before</strong>");
}, false);

演示： http : //jsfiddle.net/sjbnn68e/

Answer 5

使用以下代码：

var x = document.createElement('placeholder');

x.innerHTML = "example";

document.body.appendChild(x);