Serializing div - javascript

Trying to make kinda WISYWIG editor that creates a div with some inner elements. The div (with all the inner elements structure), once designed, should be serialized (somehow, hope it's the right term, into string and/or JSON), stored in DB and later inserted to DOM of some other HTML document.
Hence, the questions:
Which is the best way to serialize a div?
Which is the best way to de-serialize a div (and insert it to the DOM)?

You don't serialize the DIV, you serialize the form fields.
You simply grab the DIV and its contents and store these as HTML directly in the DB. It's basically the same as having HTML in a textarea.
You then just inser the HTML back into the DOM.

If you want to grab the HTML code of your DOM elements, you can use innerHTML. See this fiddle for an example:
HTML:
<div id='div1'>
<p>A Paragraph!</p>
<br/>
<p>Another p</p>
</div>
<button id='go'>Get HTML</button>
JS
document.getElementById('go').onclick = function(){
alert(document.getElementById('div1').innerHTML);
};

Related

rendering html dynamically using Aurelia

I have a requirement where I get the string in the form of HTML tags and it changes on a button click. On button click, I am changing the value of the binding element.
<div id="htmString">${htmlTag}</div>
and the content in htmlTag is
<p>Hello World!</p>
How can I skip writing document.getElement in the view model and still compile the HTML.
You just need to bind to the innerHTML property like this:
<div id="htmString" innerhtml.bind="htmlTag"></div>
So any time htmlTag changes it will get rendered inside your div.

How to dynamically create mixed HTML content in jQuery

Considering I want to create this HTML dynamically:
<li><img src="a"/>some text</li>
Some text is a text string that is potentially unsafe, let's say is stored in variable 'some_text'.
The idea is to call $('<li>').append($('<img>').attr({src:"a"}), ... );
Using $(some_text) is bad idea because it's unsafe.
Using text(some_text) doesn't work because the text is not an only child of an element.
I do not want to wrap the text into a <span>
I do not want to invent/use a function that sanitizes or escapes the string
There are many ways, but possibly the simplest is to first add the text content to the li element and then prepend the image to get the correct order.
$('<li>').text(some_text).prepend($('<img>').attr({src:"a"}), ... );

Get innerHTML and the element itself using CSS and Prototype?

This is my HTML structure:
<div class="div1">
<div class="div2">...</div>
<div class="div3">...</div>
</div>
I want the complete HTML of div3, which is
<div class="div3">...</div>
and not just its content using Prototype. I know how to get the innerHTML:
inner = $$('.div1 .div3')[0].innerHTML;
That will only give me the "...". Is there a way to select the full div or dont I see the wood for the trees?
Thanks
In most (modern) browsers, you can use outerHTML to get the entire tag as HTML. If you want just a reference to the element itself, you already have that. If you want to use the element as a template, you can use $([id or reference]).clone(true) to get a complete copy of it as an extended DOM object.

jQuery: I see append, prepend, appendTo, what about take-out-the-content-of?

I see all sorts of jQuery options such as append, prepend, appedTo etc. but I just want to take out the content of a div and append it to the inside of the body. The whole contents, so not by using .html() but being loads of other divs. These divs may have events attached as well so I don't want to mess them all up.
<div id="main">
<div id="anything" class="anything">
<p>hello etc.</p>
</div>
</div>
So I need to take out everything inside id="main"
So, something like $('#main').get-its-contents-and-append-to('body') would do it.
I guess I could write a lengthy script, but there must be a simple one-line jQuery option?
Something like this:
$('#main').detach().children().appendTo('body');
Omit the .detach() part if you want to leave the #main div in place but empty.
This will retain any event handlers or data associated with the elements being moved, as you can see here: http://jsbin.com/iguqew/1/edit
You should be able to use append:
$("body").append($("#main").html());
$("#main").empty();
You could also do this which should keep the event handlers in place:
$('body').append($("#main").children());

How do I use jQuery to generate a paragraph with ID 'blurb' in a div?

I have a div element on my web page with ID "map" with a link to Google inside of it.
<div id="map">
Google
</div>
I want to use jQuery to generate a paragraph after the link with an ID of "blurb," so the HTML akin to what the Javascript produces is
<div id="map">
Google
<p id="blurb"></p>
</div>
I have been experimenting with
$('#map').append('p').attr('id', 'blurb');
to no avail.
I am open to a Javascript, but non-jQuery way to do this as well. Thank you!
This should work:
$('#map').append('<p id="blurb"></p>');
Your method was the right general idea, but was just appending the text 'p' rather than the tag <p> and the id wasn't getting set on the right object because of the way jQuery chaining works for .append().
If you wanted to assign the id programmatically for some reason, then it's probably easier to do that this way:
$('<p>').attr('id', 'blurb').appendTo('#map');
First, set up all attributes, then append.
$('<p>').attr('id', 'blurb').appendTo('#map');
Your code doesn't work for two reasons. First of all append can take text and you must distinguish between text and HTML by using a tag (<p>) instead of p. The other reason is that chaining means jQuery's append function will return the jQuery object that it is called on. In this case an object refering to your map element. So when you set the id you were setting the id of the map div, not of your newly create element (assuming the <p> error was fixed). Also you should use prop to set the id instead of attr, but both will probably work for id. Here is some example code:
jQuery:
$('<p>').appendTo('#map').prop('id', 'blurb');
Plain Javascript (Faster, but less legible):
var pel = document.createElement('p');
pel.id = 'blurb';
document.getElementById('map').appendChild(pel);

Categories

Resources