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