We Keep Coding

try to show html tags as text with innerHTML

I have a string that contains HTML tags.
I want to render as an HTML element only the span tags aka <span></span>.
every other tag that is not a span tag should be treated as regular text.
The result I'm trying to achieve is to color any text that I want even if it contains HTML tags.
I fail.
is there any other technique that I can try or a workaround?
var problem = ["<h1>","</h1>"];
var red_text = "<span style='color:red'>i am red </span>";
var green_text = "<span style='color:green'>" +
problem[0] +
"i am green" +
problem[1] +
"</span>";
//the real result should have <h1> </h1>
var expected_text = red_text + "<span style='color:green'>|h1|i am green|/h1|</span>";
document.getElementById("demo").innerHTML = red_text + green_text;
document.getElementById("expected").innerHTML = expected_text;
HTML and JavaScript code at :
https://jsfiddle.net/ytLftxww/1/

You need to use HTML entities to escape the < and > in those tags.
For example: "<span style='color:green'><h1>i am green</h1></span>"
See the fiddle: https://jsfiddle.net/ytLftxww/1/

var problem = ["<h1>","<h1>"];
does unescaping the < > work for you?
updated fiddle

You can use &lt for < and & &gt for >.

jQuery .html() function removing text

I am trying to edit the div's text, but when i use my function to update the rowcount, everytime the text vanihes completely. Would by nice if you could also explain why.
Thanks in advance.
My update function:
var rowCountF = $('#tablef tr').length;
var rowCountV = $('#tablev tr').length;
var ftext = "Teilnehmer (" + String(rowCountF) + ")";
var vtext = "Teilnehmer (" + String(rowCountV) + ")";
$("#divf").html(ftext);
$("#divv").html(vtext);
My div layer:
<div id="divf"class="tableheader"> <h2>Teilnehmer</h2> </div>
Code for divf:
<div id="divf"class="tableheader"> <h2>Teilnehmer</h2> </div>

You are actually replacing the contents of the div itself with your text. This means the heading disappears and there is only plain text.
Probably you wanted to replace the heading contents:
$("#divf h2").html(ftext);
$("#divv h2").html(vtext);
This will select the h2 elements inside the divs and hence will update only the text inside the headings.
The result will look like the following:
<div id="divf"class="tableheader"> <h2>Teilnehmer (987)</h2> </div>
<div id="divf"class="tableheader"> <h2>Teilnehmer (123)</h2> </div>

.html() sets the HTML, meaning it replaces anything that's currently there. If you want to add to the HTML, you'll need to set the HTML to what's already there plus what you're adding, like so:
var rowCountF = $('#tablef tr').length;
var rowCountV = $('#tablev tr').length;
var ftext = "Teilnehmer (" + rowCountF + ")";
var vtext = "Teilnehmer (" + rowCountV + ")";
//Get already-existing HTML
var divfHtml = $("#divf").html();
var divvHtml = $("#divv").html();
//Set the new HTML to the existing + the new text
$("#divf").html(divfHtml + ftext);
$("#divv").html(divvHtml + vtext);
If you only want to replace the heading, then just target the <h2> as Martin Zikmund suggested in his answer.

You need to reference the h2 for the div. using .html() will replace ALL of the html inside the #divf which in this case means it will replace the h2
$("#divf h2").html(ftext);
$("#divv h2").html(vtext);
Example: https://jsfiddle.net/qhef0toc/3/

How to have jquery add a panel inside a panel in Bootstrap v3

I am running through a loop, and appending text from an array into a main panel, but I want so that each "chunk" of text is inside it's own panel.
Here's the HTML:
<div class="panel no-overflow">
<p id="fromTweets"> imported text goes here</p>
</div>
My JQUERY:
for (i = 0; i < result.statuses.length; i++) {
//Print out username and status
$("#fromTweets").append('<b>' + "Username: " + '</b>' + result.statuses[i].user.screen_name + '<br/>');
$("#fromTweets").append('<b>' + "Tweet: " + '</b>' + result.statuses[i].text + '<br/>');
}
Also, I guess I'm more generally confused with using css and jquery with the "append" way. Notice how I'm bolding text using <b>, is this bad practice, is there a better way to do this? Same question for the <br> tag.

You are probably best to create a div to which you can append panels. For instance:
<div class="panel-holder">
You can then use the append to append not just text, but a div tag with the class 'panel'.
Here's a fiddle with a quick demonstration:
https://jsfiddle.net/oq2bfyam/1/

How to show hidden div in the same line as the paragraph text?

I am trying to use the mentions plugin to add a hidden user id so I can parse the user correctly.
When I mention someone here is how it needs to look like
Hello [Mention User], This is just a test
to do that, I had to override the insert method within the plugin like this
insert: function(data){
return '<div style="display: inline;">'
+ '<span class="mentionedUser">[' + data.name + ']</span><div class="hiddenMentionUserID" style="display:none;">'+data.id+'</div>'
+ '</div>';
}
The problem with the above code is that is does not show the text on the same line as I am expecting.
Rather, here is how is the text being displayed
Hello
[Mention User]
, This is just a test
How can I tweak my html/css code to make the mention name appears on the same line as the text along with the hidden user id?

Don't use div use a span
insert: function(data){
return '<span >'
+ '<span class="mentionedUser">[' + data.name + ']</span><div class="hiddenMentionUserID" style="display:none;">'+data.id+'</div>'
+ '</span>';
}

Append a <div> in jQuery

When I'm using this code:
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "nyhederlang.xml",
dataType: "xml",
success: parseXml,
error: function(){alert("Error: Something went wrong");}
});
});
function parseXml(xml)
{
//print the title and the description
$(xml).find("article").each(function()
{
$("#output").append("<div>");
$("#output").append("<b>" + $(this).find("title").text() + ":</b> <br />");
$("#output").append($(this).find("paragraphs").text());
$("#output").append("</div>");
});
}
</script>
I get both div and /div in the beginning of #output.
Why isn't /div placed at the end of #output?
This is what it looks like:
<div id="output">
<div></div>
<b>Some title text</b>
.
.
.
.
.

$("#output").append("<div>");
doesn't append just "<div>" but a well formed (closed ) html element. That is a complete div.
The solution is to build your complete HTML and then append it :
var html = "<div>";
html += "<b>" + $(this).find("title").text() + ":</b> <br />";
html += $(this).find("paragraphs").text();
html += "</div>";
$("#output").append(html);
You could also append to the first appended div its content but, as is pointed by Ian, it's always more efficient to minimize the number of appendings.

You can't append a partial <div> tag.
jQuery will close the tag for your automatically when you append it, so the following append will therefore be placed after the intial <div>. And the final </div> you append will be another empty div after it.
What you should do is build up the whole string, and append it in a single .append() call.
$("#output").append("<div>
+"<b>" + $(this).find("title").text() + ":</b> <br />"
+$(this).find("paragraphs").text()
+"</div>");

Instead of appending each element; add it to a string then append that string. Ex:
var html = "";
html += "<div>"
html += "<b>" + $(this).find("title").text() + ":</b> <br />";
html += $(this).find("paragraphs").text();
html += "</div>";
$("#output").append(html);