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 >.

Javascript not able to replace text with new Text with html

I trying to replace text with new text inside a html tag like:
text = " hello how are you? " ;
newText = "<h1>hello how are you? </h1> " ;
This is my code:
//replacer holds the html element
var replacer = document.getElementById("#"+id);
var newElement = "<span style='font-size:100px;' id='one4'>"+selectedinnerText+"</span>";
//selectedinnerText holds the text to be replaced
alert(selectedinnerText + " "+ newElement );
//This below line is not working properly
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);

Your issue is, when you are getting an element by its id in JavaScript, you do not need # infront of the id name.
var replacer = document.getElementById(id);
So, the reason why you cannot set the innerHTML of the replacer element is because there is no element stored in the variable right now.

The correct code should be
var replacer = document.getElementById(id);// no # needed here
var newElement = "<span style='font-size:100px;' id='one4'>"+selectedinnerText+"</span>";
alert(selectedinnerText + " "+ newElement );
replacer.innerHTML = replacer.innerHTML.replace(selectedinnerText,newElement);

Javascript GetElementById Set Value To Input

I am trying to set value to my input but I want to do this while my data ends. As you know id must be unique in html. So i created an 'element' variable and I am increasing it.
I want to make my input text my model's CustomerName.
That's my code.
var element = 0;
var HTML = "";
while (element !== 5) {
HTML += "<input id=senderName" + element + " class=senderNameText type=text>";
document.getElementById("senderName" + element).value = "#Html.DisplayFor(model => model.CustomerName)";
element++;
}
div.innerHTML = HTML;
document.body.appendChild(div);
When I check it at console in Chrome it is written as "Cannot set property 'value' of null".
What should I do.
Thanks.

Your code should be like the following (note the quotes ' in creation of he new inputs are necessary) :
var element = 0;
var HTML = "";
while (element !== 5) {
div.innerHTML = "<input id='senderName" + element + "' class='senderNameText' type='text'>";
document.body.appendChild(div);
document.getElementById("senderName" + element).value = "#Html.DisplayFor(model => model.CustomerName)";
element++;
}
Now the problem come when you try to select new elements from the document and you're not yet append them so you get the message error that mean JS can't find any elements by the ids you're given.
So you should append the new HTML to the DOM inside loop.
Hope this helps.

Using a for loop within innerHTML

I want to add a box with individual boxes inside it with every age when the function is run. I tried doing it by splitting the innerHTML and using the for loop on just the agebox section so it will loop and create a new age box each time and not create a whole outerbox as well everytime like if you try loop the entire thing. I thought this would work but now it creates an age box for each loop but its placed outside the outer box and i cant figure out how to get it to loop within the outer box. If i remove the loop and just create one innerHTML then the age boxes i made manually are inside the outer box so im assuming theres a problem with the actual splitting up of the innerHTML. Thanks in advance!!
function Age(gender){
if (gender!==undefined){
el1 = document.getElementById('userdata');
el1.innerHTML += gender +"<br>";
}
el1 = document.getElementById('farespage');
el1.innerHTML += "<div id=\"outerbox\">";
for(var i=13; i<=18; i++){
el1.innerHTML +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
}
el1.innerHTML += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";
}

You need to store the output content as a string and then append it to the DOM. Otherwise, the div will be auto-closed.
el1 = document.getElementById('farespage');
output = "<div id=\"outerbox\">"; //initialize output string
//build output string
for(var i=13; i<=18; i++){
output +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
}
output += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";
el1.innerHTML = output; //output to DOM
View Fiddle

The line
el1.innerHTML += "<div id=\"outerbox\">";
is actually producing
<div id="outerbox"></div>
because most browsers will auto-close the HTML tags.
You should write all your HTML into a string buffer then append it with one big call; for example:
function Age(gender){
if (gender!==undefined){
el1 = document.getElementById('userdata');
el1.innerHTML += gender +"<br>";
}
el1 = document.getElementById('farespage');
// Magic begins here
var yourHTML = "";
yourHTML += "<div id=\"outerbox\">";
for(var i=13; i<=18; i++){
yourHTML +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
}
yourHTML += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";
el1.innerHTML += yourHTML;
}
This has the added benefit of only touching the DOM once and not 7 times (which is generally a good thing).

"document.getElementById" return null after a "document.write"

I am using a javascript code to write on my document :
nr = Math.floor(Math.random()*99999999999);
document.write('<div class="wads-content-' + nr + '" id="flashcontent' + nr + '">'+ flashrequired +'</div>');
var flashcontent = document.getElementById('flashcontent' + nr);
In my page, i execute this script twice. The first time everything works, but the second time, flashcontent is null, but i know it's wrong because I just write the element before the :
document.getElementById
Any idea what is happening?

Instead of document.write, do (good ol' JavaScript)
var div = document.createElement("div");
div.className = "wads-content-" + nr;
div.id = "flashcontent";
div.innerHTML = flashrequired;
The jQuery way of doing things:
$("<div/>").addClass("wads-content" + nr).attr("id", "flashcontent" + nr);
var flashcontent = $("#flashcontent" + nr);

I can only assume that the second call of document.write() occurs after the document has been loaded. The document is overwritten by the call then, as the output stream has been closed. See also W3C DOM Level 2 HTML.

My solution was to use this code :
var div = document.createElement("div");
div.innerHTML = flashrequired;
//Add the flash HTML (embed) in my div
addFlash(div);
var el = '<div class="wads-content-' + nr + '" id="flashcontent' + nr + '">'+ div.innerHTML +'</div>';
document.write(el);
So i don't have to find the element in my dom, i create it in javascript and just write it in my document.