We Keep Coding

How can I render html code in a div using Javascript or jQuery

I'm trying to render some HTML on the fly in my website without success. I've tried using jQuery's .html() function as below:
My html
<div id='open_ender_output'></div>
My JQuery
var openEnderContent = "<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>"
//openEnderContent comes from my backend
$('#open_ender_output').html(openEnderContent)
The result is
<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>
Is there a way to make the browser render that result on the fly so it reflects the specific styles set on the text?

Decode the content by creating a temporary element.
var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';
$('#open_ender_output').html(
// create an element where the html content as the string
$('<div/>', {
html: openEnderContent
// get text content from element for decoded text
}).text()
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='open_ender_output'></div>
Or you need to use a string which contains unescaped symbols.
var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';
$('#open_ender_output').append(openEnderContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='open_ender_output'></div>

You're on the right track. You need to differentiate between single and double quotes when creating a string. You're closing your string by adding double quotes inside double quotes.
Use the var below.
var openEnderContent = "<span style='color: #ff0000;'>DDD</span>!!!!!<strong>666666666666</strong></p>";
$('#open_ender_output').html(openEnderContent);
Fiddle for example: https://jsfiddle.net/acr2xg6u/

Change your jQuery to
var openEnderContent = '<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>';
$('#open_ender_output').append(openEnderContent);

Parsing problem from what I can tell.
"<p><span style="color: #ff0000;">DDD</span>!!!!!<strong>666666666666</strong></p>"
You cannot create strings like that. If you are inside one, you must use the other:
"My name is 'Josh Crowe'"
'My name is "Josh Crowe"'
Here's corrected code:
"<p><span style='color: #ff0000;'>DDD</span>!!!!!<strong>666666666666</strong></p>"

HTML Parsing using javaScript

I am trying to get parse HTML document.
this is the HTML:
<h1>
<span class="memName fn" itemprop="name">Ankur Arora</span>
<span class="display-none" itemprop="image">http://photos1.meetupstatic.com/photos/member/3/8/f/8/member_249974584.jpeg</span>
<span class="display-none" itemprop="url">http://www.meetup.com/Meetup-API-Testing/members/191523682/</span>
</h1>
I need to get the picture and the name.
I try this code:
var name = document.querySelector("memName fn").name;
Anyone can help me? I'm new in javaScript...
Thanks

To get the inner text, you can use the text() function, like this:
HTML:
<span class="memName fn">Ankur Arora</span>
Jquery:
var memName = $(".memName").text();
console.log(memName); // Via console log
alert(memName); // Alert it

It's easy with jQuery. Just include it in your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Then use .text() or .html() to extract the content of the span-elements
var pictureLink = $("span[itemprop='image']").text();
//.html() also gets the html-elements inside
var name = $("span[itemprop='name']").html();
https://jsfiddle.net/bh9mebru/

You can also use innerHTML to get the text.
<span id="memId" class="memName fn">Ankur Arora</span>
document.getElementsByClassName('memName') - This will give the list of elements having the class 'memName'
To get the first element's inner text use document.getElementsByClassName('memName')[0].innerHTML
or access by id .
document.getElementById('memId').innerHTML

Replace every <img> tag with itsown custom data attribute

How to replace every occurrence of <img> tag in a html message, with a unicode value stored as a custom attribute.
Sample message:
<img data-uni-val="😃" src="path/to/img1.png" class="emoji"/>hello,
<br /> <img data-uni-val="&#1F604;" src="path/to/img2.png" class="emoji"/>
I need to replace every emoji <img> with its unicode value where it stored as custom attribute.
$('<div />')
.html(chatText).find('img.emoji')
.replaceWith('someval').end().html()
Using above code I can find and replace every img's with a string, but not able to replace with data-uni-val.
I tried:
$('<div />').html(chatText).find('img.emoji')
.replaceWith($(this)
.data('data-uni-val')).end().html()
Is there any simple way to solve this?

The main issue with your code is that the attribute data-uni-val should be accessed using $(this).data('uni-val').
Furthermore, you could just use .replaceWith(fn) to perform the conversion.
$('.emoji').replaceWith(function() {
return $(this).data('uni-val');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-uni-val="😃" src="path/to/img1.png" class="emoji"/>hello,
<br /> <img data-uni-val="😄" src="path/to/img2.png" class="emoji"/>

In jQuery, the .data() function uses a different "name" than the name you use inside the element markup. It's a camelCase without the 'data' and without the hyphens.
Try .data('uniVal')

$('.emoji').each(function(){
var str = $(this).attr('data-uni-val');
$(str).insertAfter($(this));
$(this).remove();
});

$("div img").each(function(){
$(this).removeClass('emoji').addClass($(this).attr('data-uni-val'));
});

See if this is what you want:
jQuery('.emoji').each(function(){
var str = jQuery(this).attr('data-uni-val');
jQuery(this).replaceWith(str);
});

Get html content of a selector ( .html() ) with jQuery from a JavaScript variable that contains HTML

I have a javascript variable that contains a part of html code.
I need to get in this part of html code a div html content.
How can i do it ?
This is an example:
var code = '<style type="text/css">
#example{
border:1px;
font-size:20px;
}
</style>
<div id="ex"> Some Content </div>
<div id="ex2"> Some Content <span> Another Content</span></div>
<div id="my_code">This Is My Code.</div><div id="ex3> Etc Etc </div>';
I'd like get content of div "my_code" with Jquery .html();
How can i do it ?
Thanks

code variable it's just a string for your document. If you have parsed this HTML code inside the body then you can use $('#my_code'), otherwise it's still just a string so.. that's another story.
Check the other story here: http://jsfiddle.net/NSCQh/1/

I strongly suggest you have a look at jQuery's selector overview. They are the most important part of the jQuery magic, and without understanding them you'll get nowhere in the long run.
var html = $('#my_code').html()
or because that div containts text only
var txt = $('#my_code').text()

You've got a string, you need a DOM element. From that, you can get the jQuery object.
var el = document.createElement('div');
el.innerHTML = code;
console.log($(el));

pass the string to jquery and it works
var foo = '<div id="foo"> <span class="bar">fooBar</span> </div>';
var inside = $(foo).find('.bar').text();
alert(inside);

Create an ELEMENT, say p.
Use the following
$('<p>').append(code).find('div#my_code').html();
It create a p element, then append the content of variable code, then find div with id=my_code and select it's innerHTML.
Working model in the snippet.
var code = `<style type="text/css">
#example{
border:1px;
font-size:20px;
}
</style>
<div id="ex"> Some Content </div>
<div id="ex2"> Some Content <span> Another Content</span></div>
<div id="my_code">This Is My Code.</div><div id="ex3> Etc Etc </div>`;
var elm=$('<p>').append(code).find('div#my_code').html();
console.log(elm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Replace all html attribute definitions that use single quotes with double quotes

I have an html string and I want to replace any instance of an html attribute being set with single quotes with double quotes.
So for example, I want to replace
<script src='foo.js'></script>
with
<script src="foo.js"></script>
However, I want to do this without affecting any single quotes that might be in javascript statements or in text within the html.
Eg
<script> var foo = '67'; </script>
should be unaffected and
<div id='foo'> 'hi' </div>
should become
<div id="foo"> 'hi' </div>
Is there any easy way to do this?
For a given element selecting it with jquery and then reading its outerHTML does this but I want to do it to an entire page of html all at once.
Thanks!

Try this:
var str = "<br style = 'width:100px'/> test link";
var regex = /<\w+\s*(\w+\s*=\s*(['][^']*['])|(["][^"]*["]))*\s*[\/]?>/g;
var rstr = str.replace(regex, function($0,$1,$2){
return $0.replace($2, $2.replace(/'/g, '"'));
});
console.log('replaced string = ' + rstr);
You can refector it to strictly match your case.

Answering my own question as I think the easiest solution to this is what is shown in this fiddle and does not require jquery or regexps:
http://jsfiddle.net/QdUR5/1/
<html id="foo"></html>​
var htmlString =
'<head>' +
'<script type="text/javascript" src=\'main.js\'></scr' + 'ipt>' +
'</head>' +
'<body onload=\'onLoad()\'>' +
'</body>' ;
document.getElementById('foo').innerHTML = htmlString;
console.log(document.getElementById('foo').outerHTML);
​
Basically you just need to set the inner html of an html element to the html string without the html tags and then output the html elements outer html.
I think that is a bit simpler than using a regexp although that is an awesome regexp Mike :)