CODEWITHSUNDEEP
javascriptjqueryhtml
Daro125
Daro125

Reputation: 27

How to save dynamically added div elements?

This function add new div dynamically:

$(document).ready(function() {
  i = '1';
  x = '0';

  $("#btn3").click(function() {
    i++;
    x++;

    z = x * 2;
    r = z + 1;

    $('<div class="mainContainer"><div class="relayBlock"><span class="relayTitle">Obwód ' + i + ' </span> <button class="btn btn-block btn-lg btn-primary" type="button" id=' + z + ' onClick="relayClick(this.id)">Wł</button> <button class="btn btn-block btn-lg btn-danger" type="button" id=' + r + ' onClick="relayClick(this.id)">Wył</button></div></div>').appendTo("#container");
  });
});

How can I save the new created "div" ? New "div" must be visible after refreshing page.

Upvotes: 0

Views: 1766

Answers (2)

Pedram
Pedram

Reputation: 16575

You can save your html content with localStorage:

Save:

  var html = $('#container').html();
  window.localStorage.setItem('content',html);

Read:

$('#container').html(window.localStorage.getItem('content'));

JSFiddle

And if you want to empty localStorage go with this:

window.localStorage.removeItem('content');

Or

JSFiddle

Upvotes: 1

raviramani
raviramani

Reputation: 522

$(document).ready(function() {
  i = '1';
  x = '0';

  $("#btn3").click(function() {
    i++;
    x++;

    z = x * 2;
    r = z + 1;

    $("#container").append('<div class="mainContainer"><div class="relayBlock"><span class="relayTitle">Obwód ' + i + ' </span> <button class="btn btn-block btn-lg btn-primary" type="button" id=' + z + ' onClick="relayClick(this.id)">Wł</button> <button class="btn btn-block btn-lg btn-danger" type="button" id=' + r + ' onClick="relayClick(this.id)">Wył</button></div></div>');
  });
});

need to change which is appending element

Upvotes: 1

Related Questions