CODEWITHSUNDEEP
javascripthtml
Serge Profafilecebook
Serge Profafilecebook

Reputation: 1205

A HTML tag to store "javascript's data"?

I need to write some html with placeholder used for javascript.

ex:

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

Later on, a script will access those placeholders and put content in (next to?) them.

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

But the placeholder tag doesn't exist. What tag can be used? Using < input type="hidden" .../> all over feels wrong.

Upvotes: 0

Views: 1839

Answers (5)

Moob
Moob

Reputation: 16184

This complete, no jQuery solution allows you to specify the placeholder/replacement html as a string within the element that will be replaced.

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:

Use querySelectorAll to select all elements with the attribute 'data-placeholder' (returns a NodeList)

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

Extend the NodeList prototype with a simple 'each' method that allows us to iterate over the list. 

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

Extend the Object prototype with a 'replaceWith' method that replaces the element with a new one created from a html string: 

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

Put it all together:

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

Another example but here we only replace one specific element with some hard-coded html on click:

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

DEMO: http://jsfiddle.net/sjbnn68e/

Upvotes: 0

G.Nader
G.Nader

Reputation: 857

use the code below :

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

x.innerHTML = "example";

document.body.appendChild(x);

Upvotes: -1

Manwal
Manwal

Reputation: 23826

Creating Custom tag

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

Output:

<placeholder>TEST</placeholder>

DEMO

Note: However creating hidden input fields with unique ID is good practice.

Upvotes: 3

Max Langerak
Max Langerak

Reputation: 1207

The best way to do this, is using <input type='hidden' id="someId" value=""> tags. Then you can easily access them by using jQuery, and recall the variable or change it. var value = $("#someId").val(); to get variable or $("#someId").val(value) to change it.

Upvotes: 1

VPK
VPK

Reputation: 3090

give your span element an id like,

<span id="placeToAddItem"><span>

and then in jQuery,

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

or else 

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

Example

Upvotes: 1

Related Questions