We Keep Coding

how to render a JS variable into a html element

I am new to Javascript and want to be able to display a JS variable onto my page without the user going into the console as it is neater, and I find a lot of people don't know about the console, and I don't want to use the alert() code. Can anyone help?

The code below accesses the paragraph with id "test" and print the value of "testVariable" into it.
var testVariable = "hello";
document.getElementById("test").innerHTML = testVariable;
<p id="test"></p>

I think this is what you need but this example is very simple i recommend you to google more and to keep open the JavaScript Doc for any questions.
The definition for innerHTML.
The Element property innerHTML gets or sets the HTML or XML markup
contained within the element.
// Your variable
let name = "Jhon"
// Get the HTML tag by ID and set the innerHTML
document.getElementById('name').innerHTML = name;
<div class="container">
<p>Hello <span id="name"></span></p>
</div>

Convert string to HTML in JavaScript

I have a string being sent to my JavaScript function from my C# code which has a text like:
Hi <b>Welcome to C#<sup>5.0</sup></b>
I'm populating a div with this string. I need this html content to be rendered in the screen with the bold and superscript applied as below
Hi Welcome to C#5.0
I tried the below it just displays the HTML tags as plain text
myfunction = function(data) {
var mytext = '<div>'+ data +'</div>;
$('#mydivid').after(mytext);
}
Is there any other solution neither like the one given here nor like this ?
Note: I cannot declare the string in a hidden variable in my .cshtml file within #HTML.Raw and again use it in my JavaScript.
I have tried using $.parseHTML but I got an error saying
$.parseHTML is not a function
Any solution other than the above solutions are welcome. Thanks in advance.

seems like nothing is wrong with your code. Check if some css is overriding the basic em and sup functionality.
for Example the default style of em is font-style: italic which chould be override by your css

Try like this
myfunction = function(data) {
$('#mydivid').html('<div>' + data + '</div>');
}

You listed JQuery in your tags so I figured this would help.
html = $.parseHTML( 'Hi <b>Welcome to C#<sup>5.0</sup></b>' );
Check out this JSFiddle
You can also do this if you want a javascript oneliner.
document.getElementById("mydivid").innerHTML="Hi <b>Welcome to C#<sup>5.0</sup></b>";

Set div background color without using ID

Is possible change color of background my div using JavaScript without using ID? And how?
Html code is:
<div class="post" onmouseover="test(this)">
JS code is:
function test(item){
alert("Hi :-)");
}

Have you tried
function test(item){
item.style.backgroundColor = "red";
}
Since item is the actual div you're triggering this event on you won't need an ID to style the element.
A really easy (inline) solution would be the one below.
<div class="post" onmouseover="javascript:style.backgroundColor = 'red';">
Content blabla
</div>
I would personally rather do all of this inside a JS file but hey this works too.

You can loop through the DOM with JavaScript, but you'll have a better time of it if you're using JQuery. You'll want to invest some time learning about selectors:
http://api.jquery.com/category/selectors/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp.
You'll be looking for something like:
function test(){
var element = $('div');
}
As people have shared in the comments, without a unique identifier, you'll have a rough time, especially as new elements are added to the page.

HTML DOM manipulation : properly replace tag by heading tag

I want to replace some tag-inside-a-paragraph-tag by a heading-tag-enclosed-by-a-paragraph tag. This would result in proper W3C coding, but it seems that jQuery is not able to manipulate the DOM in the right way!? I tried several ways of (jQuery) coding, but i can't get it to work ..
Original code:
<p>some text <span>replace me</span> some more text</p>
Desired code:
<p>some text</p><h2>my heading</h2><p>some more text</p>
Resulting code by jQuery replaceWith():
<p>some text<p></p><h2>my heading</h2><p></p>some more text</p>
Demo: http://jsfiddle.net/foleox/J43rN/4/
In this demo, look at "make H2 custom" : i expect this to work (it's a logical replace statement), but it results in adding two empty p-tags .. The other 2 functions ("make code" and "make H2 pure") are for reference.
Officially the W3C definition states that any heading tag should not be inside a paragraph tag - you can check this by doing a W3C validation. So, why does jQuery add empty paragraph tags? Does anybody know a way to achieve this? Am i mistaken somehow?

You can achieve this with this code. However it's pretty ugly:
$('.replaceMe').each(function() {
var $parent = $(this).parent(),
$h2 = $(this).before('$sep$').wrap('<h2>').parent().insertAfter($parent);
var split = $parent.html().split('$sep$');
$parent.before('<p>' + split[0] + '</p>');
$h2.after('<p>' + split[1] + '</p>');
$parent.remove();
});
http://jsfiddle.net/J43rN/5/

If you read the jQuery docs, you will find:
When the parameter has a single tag (with optional closing tag or
quick-closing) — $("<img />") or $("<img>"), $("<a></a>") or $("<a>")
— jQuery creates the element using the native JavaScript
createElement() function.
So that is exactly what it is doing. And as I said in my comment, you can't change a parent node from a child node, you're altering the DOM here, not HTML code. So you'll need to either use replaceWith on the parent node and replace everything or use something like remove and append to split it up in multiple elements which you append after each other.

Try this:
var temp = "<p>some text <span>replace me</span> some more text</p>";
temp.replace(/(\<span\>replace me\<\/span\>)/gi, '</p><h2>my heading</h2><p>');
This will do a case insensitive replace for multiple occurences as well.
Read more about capturing groups here
Original credit to this question!

Please try this I have updated the http://jsfiddle.net/J43rN/6/ example by the below java script function please check I hope it will work for you
function fnMakeCode() {
$('#myP #replaceMe').html("<code id='replaceMe'>My Code</code>");
}
function fnMakeH2pure() {
$('#myP #replaceMe').html("<h2 id='replaceMe'>My H2 pure</h2>");
}
function fnMakeH2custom() {
$('#replaceMe').html("<p></p>").html("<h2>My H2 custom</h2>");
}

how do i refresh the div after a click function using jquery?

im trying to refresh a div on the page using jquery after a click function:
$('.finishTag').live('click', function() {
$('#Qtopics').hide();
//refresh #hiddenTopic here im stuck here :))
$('#hiddenTopic').show();
});
EDIT:
i mean refresh the div once!! and then show it because its hidden at this point!!!
<div id="hiddentTopic">
<?php
while ($Qtopic = mysql_fetch_array($getTopics)){
echo "<a href='google.com' class='topicBullet'>".$Qtopic['name']."</a>";
}
?>
</div>

If I understood it right, you wanna reload content, generated by php part. It's impossible because php is a server-side part while javascript - client-side. What you neeed is to make file server.php, move php part there and then use $('#hiddenTopic').load("server.php"); As #gowri said before.

use load
$('#hiddenTopic').load("server.php");
check your id that is with t
hiddentTopic
please change it
hiddenTopic
like this
working demo
http://jsfiddle.net/JLyay/1/
and this is not a refresh this is called hide and show

IF you want to change the formating of div you can do that using any css class like this: $('divId').addClass('class_name');
to add data you can pick the div using divid and update its innet paragraph aur heading text like this:
$('div1 p').html('blah blah any text … ');
$('h2').text('blah blah blah blah …');
$('START!').prependTo('#divID'); (it write START before div)
$('END!').appendTo('#divID'); (it write END after div)
hope this ll help you.